逛過淘寶的人都知道，淘寶有一個寶貝圖片放大鏡功能。光標(biāo)指向小圖片時，可以查看大圖片細(xì)節(jié)。效果如下圖：

如何在自己做網(wǎng)站時，在自己的網(wǎng)站上制作淘寶圖片放大鏡功能呢？下面學(xué)做網(wǎng)站論壇就來講一下制作制作淘寶圖片放大鏡功能的效果�！緢D片放大鏡功能代碼下載：https://www.xuewangzhan.com/jquery/20313.html】

方法/步驟

1. 下載圖片放大鏡功能JQUERY插件代碼，下載地址：https://pan.baidu.com/s/17uy1PT3pxXTb74EYXtApEw 密碼: h9w2
2. 將下載下來的JQUERY插件，放在與自己網(wǎng)頁同一個目錄下；
3. 在自己網(wǎng)站的頭部文件</head>標(biāo)簽上面，使用以下的JS代碼來調(diào)用圖片放大鏡功能JQUERY插件。（不懂HTML標(biāo)簽，可先學(xué)習(xí)一下html入門教程）

   
   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
   
   <script src="jquery.imagezoom.min.js"></script>
   
   

4. 用DW CS6軟件打開自己的CSS文件，將以下CSS樣式代碼復(fù)制到自己的CSS文件里。（如不懂DW CS6軟件使用方法，可先學(xué)習(xí)一下dreamweavercs6教程）

   
   /* box */
   
   
   
   .box{width:310px;margin:100px auto;}
   
   .box img{vertical-align:top;border:0;}
   
   .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;}
   
   

5. 將以下的JS代碼復(fù)制放到整個網(wǎng)頁的最底部</body>標(biāo)簽上面。

   
   <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>
   
   

6. 在需要顯示淘寶圖片放大鏡功能的位置，粘貼上以下的HTML代碼，就可以實現(xiàn)淘寶圖片放大鏡功能了。

   
   <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>
   
   

通過以上的步驟，我們在自己建網(wǎng)站時，就可以制作出類似于淘寶圖片放大鏡功能的效果了，讓自己的網(wǎng)站也高大上。

下面提供一個這種淘寶圖片放大鏡功能的示例網(wǎng)頁和全部代碼：下載鏈接: https://pan.baidu.com/s/1zEjv4wUhNDCA5ei8PoQ-tQ 密碼: q6ab

標(biāo)簽： isp 代碼 建網(wǎng)站

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。