编程 Javascript

用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 相关文章推荐

pjblog中的UBBCode.js

Apr 25 Javascript

jquery获取多个checkbox的值异步提交给php

Jul 07 Javascript

js实现点击切换checkbox背景图片的简单实例

May 08 Javascript

2种简单的js倒计时方式

Oct 20 Javascript

vue生成token保存在客户端localStorage中的方法

Oct 25 Javascript

vue全局组件与局部组件使用方法详解

Mar 29 Javascript

js实现文件上传功能后台使用MultipartFile

Sep 08 Javascript

Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法

Sep 12 Javascript

vue form check 表单验证的实现代码

Dec 09 Javascript

ajaxfileupload.js实现上传文件功能

Apr 19 Javascript

vue history 模式打包部署在域名的二级目录的配置指南

Jul 02 Javascript

vue cli安装使用less的教程详解

Jul 12 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