基于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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
详解vue express启动数据服务
Jul 05 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
JavaScript实现全选取消效果
Dec 14 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
vue中axios封装使用的完整教程
Mar 03 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
php中fsockopen用法实例
2015/01/05 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
JavaScript运算符小结
2015/06/03 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
浅析vue-router原理
2018/10/19 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
Python中IPYTHON入门实例
2015/05/11 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
python爬取个性签名的方法
2018/06/17 Python
python的turtle库使用详解
2019/05/10 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
骨干教师培训感言
2014/01/16 职场文书
空气的环保标语
2014/06/12 职场文书
本科毕业生求职信
2014/06/15 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
电气工程师岗位职责
2015/02/12 职场文书
介绍信范文大全
2015/05/07 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL