用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>

鼠标移动到小图上面效果图如下

转载于:https://www.cnblogs.com/menglin2010/archive/2011/09/14/2176373.html

用JQuery模仿淘宝的图片显示效果相关推荐

jQuery模仿淘宝商品评价
最近做项目要做个商品评价的功能,我直接就跑到淘宝那里去研究了,可看着晕晕的,还不知道他是怎么做的,于是把图扣了下来,自己写了一个,接下来就展示一下我是怎么做的,大家有不同的实现方法可要记得分享一下呀. ...
JQuery模仿淘宝天猫魔盒抢购页面倒计时效果
1.效果及功能说明通过对时间的控制来告诉用户一个活动还剩多少时间,精确到秒. 2.实现原理首先定义活动的截至的时间,要重年份精确到毫秒,在获得当前的年份到秒钟,在用截至时间,减去现在的时间,剩下的 ...
Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果
Bootstrap 网格系统 1.Bootstrap网格系统工作原理 Bootstrap的网格系统是指将页面布局划分为等宽的列.随着屏幕或视口尺寸的增加,系统会自动分为1~12列. 网格系统用于通过一 ...
简要模仿淘宝购物车功能
一主要功能: 实现通过点击.拖动添加购物车,购物金额自动结算,以及删减物品的功能. 有待改进之处:还未实现在购物车内实现+1,-1功能. 二.效果图三.相关代码 1,HTML+JS <!DOC ...
爬虫第二弹：千图网电商淘宝模板图片下载
爬虫第二弹:千图网电商淘宝模板图片下载一.功能分析: 1.下载千图网电商淘宝的所有模板图片要求是高清版本: 2.并按照主页面将图片归类文件夹. 二.思路分析: 1.利用scrapy构建scra ...
淘宝/天猫图片识别商品接口，1688图片识别商品API接口
淘宝/天猫图片识别商品接口,1688图片识别商品API接口接口代码如下: 1.公共参数: 名称类型必须描述 key String 是调用key(必须以GET方式拼接在URL中) secret ...
淘宝店图片尺寸是多少？怎么修改淘宝图片的尺寸？
随着网络的发展现在的电商平台越来越多,淘宝作为常用的电商平台也是大家最熟悉的,同时也是比较成熟的平台,许多人都会选择在淘宝上开自己的网店,而很多新手在装修上传图片资料问题上会遇到图片大小不合适的情况, ...
爬虫案例若干-爬取CSDN博文,糗事百科段子以及淘宝的图片
前面学习了基本的浏览器伪装的方式,现在来看三个实例: 例1 爬取CSDN首页的博文思路很简单,伪装浏览器之后,通过正则获取对应的url链接,然后把对应的url的文章都下载下来 #!/usr/bin/ ...
UI设计：模仿淘宝App首页
UI设计:模仿淘宝App首页

用JQuery模仿淘宝的图片显示效果

用JQuery模仿淘宝的图片显示效果相关推荐

最新文章

热门文章