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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="图片放大缩小.aspx.cs" Inherits="ASP.NET高级.图片放大缩小" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<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);
}
}
}

鼠标移动到图片上实现图片的放大缩小相关推荐

html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字
DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景 ...
鼠标移到图片上，图片放大
.Nei1 img{ width: 122px; height: 89.6px; float: left; padding: 2px 2px; transition: all 0.6s; } .Nei ...
html5使鼠标移动上去页面上的图片向左移动
在这里插入代码片<!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
python代码图片-python实现图片上添加图片
在介绍完给图上添加文字后,我们再介绍给图片上添加图片,也就是图片的叠加. 需要使用的Python的图像库:PIL.更加详细的知识点如下: Imaga模块:用来创建,打开,保存图片文件 new(path ...
python开发图片_python实现图片上添加图片
在介绍完给图上添加文字后,我们再介绍给图片上添加图片,也就是图片的叠加. 需要使用的Python的图像库:PIL.更加详细的知识点如下: Imaga模块:用来创建,打开,保存图片文件 new(path ...
如何在线压缩图片大小？图片上传太大怎么缩小？
图片上传过大怎么缩小?如果使用在线图片压缩的工具话就非常的方便,推荐大家一款无需下载就可以在线图片压缩工具--压缩啦,下面来看看怎么在线图片压缩大小吧. 1.打开浏览器进入压缩啦选择图片压缩,上传图片 ...
Python版在图片上添加图片
在介绍完给图上添加文字后,我们再介绍给图片上添加图片,也就是图片的叠加. 需要使用的Python的图像库:PIL.更加详细的知识点如下: Imaga模块:用来创建,打开,保存图片文件 new(path ...
python 添加图片,python实现图片上添加图片
在介绍完给图上添加文字后,我们再介绍给图片上添加图片,也就是图片的叠加. 需要使用的Python的图像库:PIL.更加详细的知识点如下: Imaga模块:用来创建,打开,保存图片文件 new(path ...
css鼠标图片hover移入移出缓慢放大缩小
css鼠标图片hover移入移出缓慢放大缩小 /* transition 别放hover里,放到img里,这样移入移出一样缓慢,不然只对hover移上去有缓慢效果 */.image{width: 10 ...
iOS修改图片尺寸和裁剪功能以及图片上加图片图片加文字（水印效果）
1.修改图片尺寸 - ( UIImage *)imageWithImageSimple:( UIImage *)image scaledToSize:( CGSize )newSize { ...

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

鼠标移动到图片上实现图片的放大缩小相关推荐

最新文章

热门文章