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

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:38 PM

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

<div class="box"> 
  <div class="tb-booth tb-pic tb-s310"> 
   <a href="images/01.jpg"> 
    <img class="jqzoom lazy"  src="/static/imghw/default1.png"  data-src="images/01_mid.jpg"  alt="美女" rel="images/01.jpg" /></a> 
  </div> 
  <ul class="tb-thumb" id="thumblist"> 
   <li class="tb-selected"> 
    <div class="tb-pic tb-s40"> 
     <a href="#"> 
      <img  src="/static/imghw/default1.png"  data-src="images/01_small.jpg"  class="lazy" mid="images/01_mid.jpg" big="images/01.jpg" alt="基于jQuery仿淘宝产品图片放大镜代码分享_jquery" ></a></div> 
   </li> 
   <li> 
    <div class="tb-pic tb-s40"> 
     <a href="#"> 
      <img  src="/static/imghw/default1.png"  data-src="images/02_small.jpg"  class="lazy" mid="images/02_mid.jpg" big="images/02.jpg" alt="基于jQuery仿淘宝产品图片放大镜代码分享_jquery" ></a></div> 
   </li> 
   <li> 
    <div class="tb-pic tb-s40"> 
     <a href="#"> 
      <img  src="/static/imghw/default1.png"  data-src="images/03_small.jpg"  class="lazy" mid="images/03_mid.jpg" big="images/03.jpg" alt="基于jQuery仿淘宝产品图片放大镜代码分享_jquery" ></a></div> 
   </li> 
   <li> 
    <div class="tb-pic tb-s40"> 
     <a href="#"> 
      <img  src="/static/imghw/default1.png"  data-src="images/04_small.jpg"  class="lazy" mid="images/04_mid.jpg" big="images/04.jpg" alt="基于jQuery仿淘宝产品图片放大镜代码分享_jquery" ></a></div> 
   </li> 
   <li> 
    <div class="tb-pic tb-s40"> 
     <a href="#"> 
      <img  src="/static/imghw/default1.png"  data-src="images/05_small.jpg"  class="lazy" mid="images/05_mid.jpg" big="images/05.jpg" alt="基于jQuery仿淘宝产品图片放大镜代码分享_jquery" ></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淘宝产品图片放大镜特效代码如下

<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 class="jqzoom lazy"  src="/static/imghw/default1.png"  data-src="images/01_mid.jpg"  alt="美女" rel="images/01.jpg" /></a>
 </div>

 <ul class="tb-thumb" id="thumblist">
 <li class="tb-selected"><div class="tb-pic tb-s40"><a href="#"><img  src="/static/imghw/default1.png"  data-src="images/01_small.jpg"  class="lazy" mid="images/01_mid.jpg" big="images/01.jpg" alt="基于jQuery仿淘宝产品图片放大镜代码分享_jquery" ></a></div></li>
 <li><div class="tb-pic tb-s40"><a href="#"><img  src="/static/imghw/default1.png"  data-src="images/02_small.jpg"  class="lazy" mid="images/02_mid.jpg" big="images/02.jpg" alt="基于jQuery仿淘宝产品图片放大镜代码分享_jquery" ></a></div></li>
 <li><div class="tb-pic tb-s40"><a href="#"><img  src="/static/imghw/default1.png"  data-src="images/03_small.jpg"  class="lazy" mid="images/03_mid.jpg" big="images/03.jpg" alt="基于jQuery仿淘宝产品图片放大镜代码分享_jquery" ></a></div></li>
 <li><div class="tb-pic tb-s40"><a href="#"><img  src="/static/imghw/default1.png"  data-src="images/04_small.jpg"  class="lazy" mid="images/04_mid.jpg" big="images/04.jpg" alt="基于jQuery仿淘宝产品图片放大镜代码分享_jquery" ></a></div></li>
 <li><div class="tb-pic tb-s40"><a href="#"><img  src="/static/imghw/default1.png"  data-src="images/05_small.jpg"  class="lazy" mid="images/05_mid.jpg" big="images/05.jpg" alt="基于jQuery仿淘宝产品图片放大镜代码分享_jquery" ></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淘宝产品图片放大镜特效代码，希望大家可以喜欢，并应用到实践中。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7525

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何创建和发布自己的JavaScript库？ Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能？ Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

如何使用浏览器开发人员工具有效调试JavaScript代码？ Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。

谁得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

如何使用源地图调试缩小JavaScript代码？ Mar 18, 2025 pm 03:17 PM

本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。

console.log输出结果差异：两次调用为何不同？ Apr 04, 2025 pm 05:12 PM

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异，并解释其背后的原因。�...

初学者的打字稿，第2部分：基本数据类型 Mar 19, 2025 am 09:10 AM

掌握了入门级TypeScript教程后，您应该能够在支持TypeScript的IDE中编写自己的代码，并将其编译成JavaScript。本教程将深入探讨TypeScript中各种数据类型。 JavaScript拥有七种数据类型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。TypeScript在此基础上定义了更多类型，本教程将详细介绍所有这些类型。 Null数据类型与JavaScript一样，TypeScript中的null

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题