实现淘宝局部方法效果

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<link href="css/css.css" type="text/css" rel="stylesheet">
<SCRIPT src="js/jquery1.42.min.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/index.js" type=text/javascript></SCRIPT>
</head>

<body style="text-align:center">

<div id="product">
   <div class="proobj" id="spec-n1"><img src="images/img04.jpg" height=350 width=350>
   </div>
   <div id="spec-n5">
       <div class="control" id="spec-left">
           <img src="images/left.gif" />
       </div>
       <div id="product_list">
           <ul class="list-h">
               <li><img src="images/img01.jpg"> </li>
               <li><img src="images/img02.jpg"> </li>
               <li><img src="images/img03.jpg"> </li>
               <li><img src="images/img04.jpg"> </li>
               <li><img src="images/img01.jpg"> </li>
               <li><img src="images/img02.jpg"> </li>

           </ul>
       </div>
       <div class="control" id="spec-right">
           <img src="images/right.gif" />
       </div>

    </div>
</div>
<SCRIPT type=text/javascript>
   $(function(){
       /*要放大的图像父元素*/
       $(".proobj").jqueryzoom({
           xzoom:400,
           yzoom:400,
           offset:10,
           position:"left",
       });
       /*滚动的小图列表父元素*/
       $("#product_list").jdMarquee({
           deriction:"left",
           width:350,
           height:56,
           step:2,
           speed:4,
           delay:10,
           control:true,
           _front:"#spec-right",
           _back:"#spec-left"
       });
       /*点击的小图片*/
       $("#product_list img").bind("mouseover",function(){
           var src=$(this).attr("src");
           /*被切换的大图片*/
           $("#spec-n1 img").eq(0).attr({
               src:src.replace("\/n5\/","\/n1\/"),
               jqimg:src.replace("\/n5\/","\/n0\/")
           });
           $(this).css({
               "border":"2px solid #ff6600",
               "padding":"1px"
           });
       }).bind("mouseout",function(){
           $(this).css({
               "border":"1px solid #ccc",
               "padding":"2px"
           });
       });
   })
   </SCRIPT>

</body>
</html>

css.css

#product{ float:none; margin:20px auto; text-align:center; width:500px;}
.proobj{ width:350px; height:350px; position:relative;}

.zoomdiv{ left:859px; height:400px; width:400px;}
.list-h li{ float:left;}
#spec-n5{width:350px; height:56px; padding-top:6px; overflow:hidden;}
#spec-left{ background:url(images/left.gif) no-repeat; width:10px; height:45px; float:left; cursor:pointer; margin-top:5px;}
#spec-right{background:url(images/right.gif) no-repeat; width:10px; height:45px; float:left;cursor:pointer; margin-top:5px;}
#product_list{ width:325px; float:left; overflow:hidden; margin-left:2px; display:inline;}
#product_list ul li{ float:left; margin-right:0px; display:inline; width:62px;}
#product_list ul li img{ padding:2px ; border:1px solid #ccc; width:50px; height:50px;}

#n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}
#n a{ padding:0 4px; color:#333}

/*proobj www.divcss5.com */
.proobj{position:relative;padding:0;}
.zoomdiv{z-index:100;position:absolute;top:1px;left:0px;width:400px;height:400px;background:url(i/loading.gif) #fff no-repeat center center;border:1px solid #e4e4e4;display:none;text-align:center;overflow: hidden;}
.bigimg{width:800px;height:800px;}
.proobjPup{z-index:10;visibility:hidden;position:absolute;top:0px;left:0px;width:50px;height:50px;border:1px solid #aaa;background:#FEDE4F 50% top no-repeat;opacity:0.5;-moz-opacity:0.5;-khtml-opacity:0.5;filter:alpha(Opacity=50);cursor:move;}
#product_list{ position:relative; width:322px; margin-right:6px;}
#product_list div{ margin-top:0;margin-left:-30px; *margin-left:0;}

index.js

放大镜特效：

来源：https://www.cnblogs.com/jiechen/p/4979234.html

标签

margin

spec