简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Sharing the magnifying glass code for imitating Taobao product pictures based on jQuery_jquery

Sharing the magnifying glass code for imitating Taobao product pictures based on jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 15:38:011601browse

这篇文章主要介绍了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="Sharing the magnifying glass code for imitating Taobao product pictures based on jQuery_jquery" 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" alt="Sharing the magnifying glass code for imitating Taobao product pictures based on jQuery_jquery" ></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" alt="Sharing the magnifying glass code for imitating Taobao product pictures based on jQuery_jquery" ></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" alt="Sharing the magnifying glass code for imitating Taobao product pictures based on jQuery_jquery" ></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" alt="Sharing the magnifying glass code for imitating Taobao product pictures based on jQuery_jquery" ></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" alt="Sharing the magnifying glass code for imitating Taobao product pictures based on 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 src="images/01_mid.jpg" alt="Sharing the magnifying glass code for imitating Taobao product pictures based on jQuery_jquery" 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" alt="Sharing the magnifying glass code for imitating Taobao product pictures based on jQuery_jquery" ></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" alt="Sharing the magnifying glass code for imitating Taobao product pictures based on jQuery_jquery" ></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" alt="Sharing the magnifying glass code for imitating Taobao product pictures based on jQuery_jquery" ></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" alt="Sharing the magnifying glass code for imitating Taobao product pictures based on jQuery_jquery" ></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" alt="Sharing the magnifying glass code for imitating Taobao product pictures based on 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淘宝产品图片放大镜特效代码，希望大家可以喜欢，并应用到实践中。

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JS drag and drop library example based on object-oriented implementation_javascript skillsNext article：JS drag and drop library example based on object-oriented implementation_javascript skills

Related articles

See more