admin 管理员组

文章数量: 1087652

鼠标移动到图片上实现图片的放大缩小

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="图片放大缩小.aspx.cs" Inherits="ASP.NET高级.图片放大缩小" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd"><html xmlns="" >
<head runat="server"><title></title><script src="js/jquery-1.7.1.js" type="text/javascript"></script>
</head>
<body><form id="form1" runat="server"><div><asp:ObjectDataSource ID="ObjectDataSource1" runat="server" InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" TypeName="ASP.NET高级.dal.DataSet1TableAdapters.userTableAdapter"><InsertParameters><asp:Parameter Name="username" Type="String" /><asp:Parameter Name="age" Type="String" /><asp:Parameter Name="sex" Type="String" /><asp:Parameter Name="image" Type="String" /></InsertParameters></asp:ObjectDataSource><asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1"><HeaderTemplate ><table id="tables" ><tr></HeaderTemplate><ItemTemplate ><td><asp:Image Width ="150" Height ="150"  runat="server" ImageUrl ='<%#FormatImage(Eval("image")) %>' /></td></ItemTemplate><FooterTemplate ></tr></table></FooterTemplate></asp:Repeater><br /><script type="text/javascript">$("#tables img").mouseenter(function() {$(this).animate({ "width": "300", "height": "200" }, "slow");$("#tables img").not($(this)).animate({"width":"150","height":"150"},"slow");});</script></div></form>
</body>
</html>



 前端采用image服务端控件，所以在后端定义衣个FormatImage函数返回浏览器端的图片url地址

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;namespace ASP.NET高级
{public partial class 图片放大缩小 : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}protected string FormatImage(object url){return ResolveClientUrl("~/image/"+url);}}
}


 

本文标签： 鼠标移动到图片上实现图片的放大缩小

版权声明：本文标题：鼠标移动到图片上实现图片的放大缩小 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1686558644a10150.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。