用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 相关文章推荐
javascript preload&amp;lazy load
May 13 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
JavaScript中两个感叹号的作用说明
Dec 28 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
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
PHP 函数学习简单小结
2010/07/08 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
python多线程同步实例教程
2019/08/11 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
Python自动登录QQ的实现示例
2020/08/28 Python
英国网上购买门:Direct Doors
2018/06/07 全球购物
.NET方向面试题
2014/11/20 面试题
自我评价是什么
2014/01/04 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
邀请函怎么写
2015/01/30 职场文书
质量保证书格式
2015/02/27 职场文书
新党员入党决心书
2015/09/22 职场文书