基于jQuery仿淘寶產品圖片放大鏡代碼分享_jquery

來源：懂視網責編：小采時間：2020-11-27 21:44:02

基于jQuery仿淘寶產品圖片放大鏡代碼分享_jquery

基于jQuery仿淘寶產品圖片放大鏡代碼分享_jquery:這篇文章主要介紹了jQuery淘寶產品圖片放大鏡特效，鼠標點擊圖片，圖片放大，特別適合圖片細節(jié)展示，感興趣的小伙伴可以參考下。 (1)html代碼： (2)css代碼： html{overflow-y:scroll;} bod

推薦度：

點擊下載本文 文檔為doc格式

導讀基于jQuery仿淘寶產品圖片放大鏡代碼分享_jquery:這篇文章主要介紹了jQuery淘寶產品圖片放大鏡特效，鼠標點擊圖片，圖片放大，特別適合圖片細節(jié)展示，感興趣的小伙伴可以參考下。 (1)html代碼： (2)css代碼： html{overflow-y:scroll;} bod

這篇文章主要介紹了jQuery淘寶產品圖片放大鏡特效，鼠標點擊圖片，圖片放大，特別適合圖片細節(jié)展示，感興趣的小伙伴可以參考下。
(1)html代碼：

(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淘寶產品圖片放大鏡特效代碼，實現過程很簡單。
運行效果圖：-----------------------------查看效果源碼下載----------------------------