鼠标移动到图片放大的效果
2012-03-02 18:13
561 查看
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="动画效果.aspx.cs" Inherits="repeater.动画效果" %> <!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="Scripts/jquery-1.4.1.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div> <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> <HeaderTemplate><table><tr></HeaderTemplate> <ItemTemplate><td><img width="200" height="150" name='<%#Eval("name")%>' country='<%#Eval("country")%>' src='images\<%#Eval("imagepath") %>' /></td></ItemTemplate> <FooterTemplate></tr></table></FooterTemplate> </asp:Repeater> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database1.mdf;Integrated Security=True;User Instance=True" ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Images]"> </asp:SqlDataSource> <script type="text/javascript"> $("img").mouseenter(function () { $(this).animate({ "width": "400", "height": "300" }, "fsat"); //$("img").not($(this)).animate({ "width": "200", "height": "150" }); //用not就不用添加mouseleave事件 }); //$("img").mousemove(function (e) { //$("#s1").text($(this).attr("name")); // $("#s2").text($(this).attr("country")); // $("#div1").css("top", e.pageY).css("left", e.pageX).show(); // }); $("img").mouseleave(function () { $(this).animate({ "width": "200", "height": "150" }); }); </script> <div id="div1" style=" display:none; position:absolute; background-color:Green; width: 100px; height:50px"> <p>名称:<span id="s1"></span></p> <p>国家:<span id="s2"></span></p> </div> </div> </form> </body> </html>
相关文章推荐
- 当鼠标移动到图片上时跟随鼠标显示放大的图片效果
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- jquery鼠标移动图片上实现放大效果
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- JS与CSS3实现图片响应鼠标移动放大效果示例
- css实现鼠标移动图片上放大效果
- css实现鼠标移动图片居中放大效果
- 仿淘宝商品图片放大镜效果(鼠标移动上去会出现放大的图片,并且可以移动)
- 当鼠标移动到图片上时跟随鼠标显示放大的图片效果
- jq实现鼠标移动到 图片上放大,移开图片缩小效果(打算封装成插件)
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- JS实现鼠标移动到缩略图显示大图的图片放大效果
- jQuery鼠标移动图片上实现放大效果
- 仿淘宝鼠标移动商品图片放大效果
- JS实现鼠标移动到缩略图显示大图的图片放大效果
- 制作跟随鼠标移动的图片放大效果
- 图片定义的title提示信息的样式以及提示信息跟随鼠标的移动而移动的效果
- JS原生代码实现鼠标移动图片随之移动效果(另加点击改变图片效果)
- JS打造的弹性跳跃的图片效果且感应鼠标放大
- 用html语言实现鼠标悬停放大图片的效果的方法