栏目导航

热点推荐

阅览排行

当前位置：主页>网络编程>Javascript教程>资讯:用JQuery模仿淘宝的图片放大镜显示效果

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

www.jz123.cn 2012-03-19 来源: 站长家园责任编辑(袁袁) 我要投递新闻

相信大部分人都上过淘宝网吧，里面有个这个效果，当鼠标移动到小图上面，显示大图。
代码如下
<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="">

</body>
<p id="detailHeight"></p>
<p id="detailName"></p>
</div>

顶一下

上一篇：基于jQuery的输入框在光标位置插入内容, 并选中下一篇：jquery获得下拉框值的代码

栏目导航

热点推荐

阅览排行

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

相关文章列表

评论总数：0 条 [ 查看全部 ] 网友评论