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

所属分类: 网络编程 / JavaScript 阅读数: 151
收藏 0 赞 0 分享
如图

  
今天我做的是利用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>

鼠标移动到小图上面效果图如下

  

更多精彩内容其他人还在看

基于jquery封装的一个js分页

基于jquery封装的一个js分页代码,需要的朋友可以参考下。
收藏 0 赞 0 分享

关于js datetime的那点事

关于js datetime的一些使用经验分享,想要了解datetime日期操作的朋友可以参考下。
收藏 0 赞 0 分享

js 关于=+与+=日期函数使用说明(赋值运算符)

js 关于=+与+=日期函数使用说明(赋值运算符),可以看下,就是一些运算符的使用,看哪个更适合你。
收藏 0 赞 0 分享

JS 操作符整理[推荐收藏]

JS 操作符主要包括算术运算符,赋值运算符,比较(关系)运算符,逻辑运算符,串符(连接作用),条件运算符等
收藏 0 赞 0 分享

让html的text输入框只能输入数字和1个小数点(0-59之间可改)

今天有同事需要这个功能,主要是限制用户输入不符合规范的数字与小数点导致不好计算价格问题,特整理了下面的代码,需要的朋友可以参考下。
收藏 0 赞 0 分享

Jquery 获取checkbox的checked问题

这个郁闷了,今天写这个功能的时候发现了问题,上网找了好多资料对照,更加纠结
收藏 0 赞 0 分享

jQuery EasyUI API 中文文档 - DataGrid数据表格

jQuery EasyUI API 中文文档 - DataGrid数据表格使用说明,需要的朋友可以参考下。
收藏 0 赞 0 分享

jQuery EasyUI API 中文文档 - PropertyGrid属性表格

jQuery EasyUI API 中文文档 - PropertyGrid属性表格使用介绍,需要的朋友可以参考下。
收藏 0 赞 0 分享

20款效果非常棒的 jQuery 插件小结分享

这篇文章向大家推荐20款效果非常棒的 jQuery 插件。jQuery 是一个非常优秀的JavaScript库,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,同时也改变了很多人编写 JavaScript 代码的方式
收藏 0 赞 0 分享

基于Jquery插件开发之图片放大镜效果(仿淘宝)

公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大,使用jquery的朋友可以参考下。
收藏 0 赞 0 分享
查看更多