用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 检测浏览器类型和版本的代码
Sep 15 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
微信小程序 标签传入数据
May 08 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
Javascript之高级数组API的使用实例
Mar 08 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
ajax异步刷新实现更新数据库
2012/12/03 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
python logging通过json文件配置的步骤
2020/04/27 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
比利时买床:Beter Bed
2017/12/06 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
店长岗位的工作内容
2013/11/12 职场文书
走群众路线剖析材料
2014/10/09 职场文书
大学生党性分析材料
2014/12/19 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
Python 正则模块详情
2021/11/02 Python
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript