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


Posted in Javascript onSeptember 15, 2011

如图

   用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>

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

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

Javascript 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
JSONObject使用方法详解
Dec 17 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
document.getElementById介绍
Sep 13 #Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 #Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 #Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 #Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 #Javascript
各情景下元素宽高的获取实现代码
Sep 13 #Javascript
JS字符串函数扩展代码
Sep 13 #Javascript
You might like
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
基于Python的关键字监控及告警
2017/07/06 Python
机器学习10大经典算法详解
2017/12/07 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
教研处工作方案
2014/05/26 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
Python初识逻辑与if语句及用法大全
2021/08/07 Python