用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 相关文章推荐
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
js模拟实现百度搜索
Jun 28 Javascript
js实现点击选项置顶动画效果
Aug 25 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 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
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
Python计算三角函数之asin()方法的使用
2015/05/15 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
python用插值法绘制平滑曲线
2021/02/19 Python
python实现文件的备份流程详解
2019/06/18 Python
200行python代码实现2048游戏
2019/07/17 Python
python几种常用功能实现代码实例
2019/12/25 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
Python中包的用法及安装
2020/02/11 Python
python线程里哪种模块比较适合
2020/08/02 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
求职自荐信怎么写
2014/03/06 职场文书
国培计划培训感言
2014/03/11 职场文书
经营场所证明范本
2015/06/19 职场文书