基于jQuery仿淘宝产品图片放大镜代码分享


Posted in Javascript onJune 23, 2020

这篇文章主要介绍了jQuery淘宝产品图片放大镜特效,鼠标点击图片,图片放大,特别适合图片细节展示,感兴趣的小伙伴可以参考下。

(1)html代码:

<div class="box"> 
 <div class="tb-booth tb-pic tb-s310"> 
  <a href="images/01.jpg"> 
  <img src="images/01_mid.jpg" alt="美女" rel="images/01.jpg" class="jqzoom" /></a> 
 </div> 
 <ul class="tb-thumb" id="thumblist"> 
  <li class="tb-selected"> 
  <div class="tb-pic tb-s40"> 
   <a href="#"> 
   <img src="images/01_small.jpg" mid="images/01_mid.jpg" big="images/01.jpg"></a></div> 
  </li> 
  <li> 
  <div class="tb-pic tb-s40"> 
   <a href="#"> 
   <img src="images/02_small.jpg" mid="images/02_mid.jpg" big="images/02.jpg"></a></div> 
  </li> 
  <li> 
  <div class="tb-pic tb-s40"> 
   <a href="#"> 
   <img src="images/03_small.jpg" mid="images/03_mid.jpg" big="images/03.jpg"></a></div> 
  </li> 
  <li> 
  <div class="tb-pic tb-s40"> 
   <a href="#"> 
   <img src="images/04_small.jpg" mid="images/04_mid.jpg" big="images/04.jpg"></a></div> 
  </li> 
  <li> 
  <div class="tb-pic tb-s40"> 
   <a href="#"> 
   <img src="images/05_small.jpg" mid="images/05_mid.jpg" big="images/05.jpg"></a></div> 
  </li> 
 </ul> 
 </div>

(2)css代码:

html{overflow-y:scroll;} 
body{margin:0; font:12px "\5B8B\4F53",san-serif;background:#ffffff;} 
div,ul,li{padding:0; margin:0;} 
li{list-style-type:none;} 
img{vertical-align:top;border:0;} 
 
/* box */ 
.box{width:310px;margin:100px auto;} 
.tb-pic a{display:table-cell;text-align:center;vertical-align:middle;} 
.tb-pic a img{vertical-align:middle;} 
.tb-pic a{*display:block;*font-family:Arial;*line-height:1;} 
.tb-thumb{margin:10px 0 0;overflow:hidden;} 
.tb-thumb li{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;} 
.tb-s310, .tb-s310 a{height:310px;width:310px;} 
.tb-s310, .tb-s310 img{max-height:310px;max-width:310px;} 
.tb-s310 a{*font-size:271px;} 
.tb-s40 a{*font-size:35px;} 
.tb-s40, .tb-s40 a{height:40px;width:40px;} 
.tb-booth{border:1px solid #CDCDCD;position:relative;z-index:1;} 
.tb-thumb .tb-selected{background:none repeat scroll 0 0 #C30008;height:40px;padding:2px;} 
.tb-thumb .tb-selected div{background-color:#FFFFFF;border:medium none;} 
.tb-thumb li div{border:1px solid #CDCDCD;} 
div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;} 
div.zoomMask{position:absolute;background:url("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}

本文实例讲述了jQuery淘宝产品图片放大镜特效。分享给大家供大家参考。具体如下:
这是一款基于jQuery淘宝产品图片放大镜特效代码,实现过程很简单。
运行效果图:-----------------------------查看效果 源码下载----------------------------

基于jQuery仿淘宝产品图片放大镜代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery淘宝产品图片放大镜特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery淘宝产品图片放大镜代码</title>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.imagezoom.min.js"></script>

 
<style type="text/css">
html{overflow-y:scroll;}
body{margin:0; font:12px "\5B8B\4F53",san-serif;background:#ffffff;}
div,ul,li{padding:0; margin:0;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}

/* box */
.box{width:310px;margin:100px auto;}
.tb-pic a{display:table-cell;text-align:center;vertical-align:middle;}
.tb-pic a img{vertical-align:middle;}
.tb-pic a{*display:block;*font-family:Arial;*line-height:1;}
.tb-thumb{margin:10px 0 0;overflow:hidden;}
.tb-thumb li{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}
.tb-s310, .tb-s310 a{height:310px;width:310px;}
.tb-s310, .tb-s310 img{max-height:310px;max-width:310px;}
.tb-s310 a{*font-size:271px;}
.tb-s40 a{*font-size:35px;}
.tb-s40, .tb-s40 a{height:40px;width:40px;}
.tb-booth{border:1px solid #CDCDCD;position:relative;z-index:1;}
.tb-thumb .tb-selected{background:none repeat scroll 0 0 #C30008;height:40px;padding:2px;}
.tb-thumb .tb-selected div{background-color:#FFFFFF;border:medium none;}
.tb-thumb li div{border:1px solid #CDCDCD;}
div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
div.zoomMask{position:absolute;background:url("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}
</style>


</head>

<body>

<div class="box">

 <div class="tb-booth tb-pic tb-s310">
 <a href="images/01.jpg"><img src="images/01_mid.jpg" alt="美女" rel="images/01.jpg" class="jqzoom" /></a>
 </div>

 <ul class="tb-thumb" id="thumblist">
 <li class="tb-selected"><div class="tb-pic tb-s40"><a href="#"><img src="images/01_small.jpg" mid="images/01_mid.jpg" big="images/01.jpg"></a></div></li>
 <li><div class="tb-pic tb-s40"><a href="#"><img src="images/02_small.jpg" mid="images/02_mid.jpg" big="images/02.jpg"></a></div></li>
 <li><div class="tb-pic tb-s40"><a href="#"><img src="images/03_small.jpg" mid="images/03_mid.jpg" big="images/03.jpg"></a></div></li>
 <li><div class="tb-pic tb-s40"><a href="#"><img src="images/04_small.jpg" mid="images/04_mid.jpg" big="images/04.jpg"></a></div></li>
 <li><div class="tb-pic tb-s40"><a href="#"><img src="images/05_small.jpg" mid="images/05_mid.jpg" big="images/05.jpg"></a></div></li>
 </ul>
 
</div>
<script type="text/javascript">
$(document).ready(function(){

 $(".jqzoom").imagezoom();
 
 $("#thumblist li a").click(function(){
 $(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
 $(".jqzoom").attr('src',$(this).find("img").attr("mid"));
 $(".jqzoom").attr('rel',$(this).find("img").attr("big"));
 });

});
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
 </body>
 </html>

以上就是为大家分享的jQuery淘宝产品图片放大镜特效代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
使用原生javascript开发计算器实例代码
Feb 21 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
深入分析jsonp协议原理
Sep 26 #Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 #Javascript
angularjs学习笔记之双向数据绑定
Sep 26 #Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 #Javascript
angularjs学习笔记之完整的项目结构
Sep 26 #Javascript
jQuery实现的登录浮动框效果代码
Sep 26 #Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 #Javascript
You might like
Protoss兵种对照表
2020/03/14 星际争霸
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
python如何实现内容写在图片上
2018/03/23 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
python制作填词游戏步骤详解
2019/05/05 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
大学校庆邀请函
2014/01/11 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
小学同学聚会感言
2015/07/30 职场文书
开学随笔
2015/08/15 职场文书