用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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 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
php4与php5的区别小结(配置异同)
2011/12/20 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
Vue自定义指令详解
2017/07/28 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
python中xrange用法分析
2015/04/15 Python
使用python实现BLAST
2018/02/12 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Python如何操作docker redis过程解析
2020/08/10 Python
深入分析python 排序
2020/08/24 Python
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
执行力心得体会范文
2016/01/11 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS