用JQuery模仿淘宝的图片放大镜显示效果

如图今天我做的是利用JQuery模拟这个效果源码如下复制代码代码如下: <head> <script type="text/javascript" src="Js/jquery-1.4.1.js"></script> <script type="text/javascript"> //假设data是从数据库取到的数据 var data = {"images/1_small.jpg":["images/1_big.jpg","内衣少女","主演：文咏珊，郑丽欣"],"images/2_small.jpg":["images/2_big.jpg","爱情陷阱","主演：金正勋，蔡琳"],"images/3_small.jpg":["images/3_big.jpg","源代码","主演：贾斯丁，克里斯丁娜"]}; $(function(){ $.each(data,function(key,value){ var smallimg = $("<img src='" + key + "'>"); smallimg.attr("bigmappath",value[0]); smallimg.attr("personname",value[1]); smallimg.attr("personheight",value[2]); smallimg.mouseover(function(e){ $("#detailImg").attr("src",$(this).attr("bigmappath")); $("#detailHeight").text($(this).attr("personheight")); $("#detailName").text($(this).attr("personname")); $("#details").css("top",e.pageY).css("left",e.pageX).css("display",""); }); $("body").append(smallimg); }); }); </script> </head> <body> <div style="display:none;position:absolute;" id="details"> <img id="detailImg" src=""> <p id="detailHeight"></p> <p id="detailName"></p> </div> </body> 鼠标移动到小图上面效果图如下

　　推荐阅读

　　JavaScript高级程序设计事件学习笔记

第12章事件 1.事件流 1.1事件冒泡（IE事件流） □事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播到较为不具体的节点（文档）。 □所有浏览器均>>>详细阅读

本文标题：用JQuery模仿淘宝的图片放大镜显示效果

地址：http://www.17bianji.com/kaifa2/JS/24169.html

1/2 1