基于jQuery仿淘寶產(chǎn)品圖片放大鏡代碼分享_jquery

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:44:02

基于jQuery仿淘寶產(chǎn)品圖片放大鏡代碼分享_jquery

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

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

這篇文章主要介紹了jQuery淘寶產(chǎn)品圖片放大鏡特效，鼠標(biāo)點(diǎn)擊圖片，圖片放大，特別適合圖片細(xì)節(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;}

本文實(shí)例講述了jQuery淘寶產(chǎn)品圖片放大鏡特效。分享給大家供大家參考。具體如下：
這是一款基于jQuery淘寶產(chǎn)品圖片放大鏡特效代碼，實(shí)現(xiàn)過程很簡(jiǎn)單。
運(yùn)行效果圖：-----------------------------查看效果源碼下載----------------------------

小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的jQuery淘寶產(chǎn)品圖片放大鏡特效代碼如下



jQuery淘寶產(chǎn)品圖片放大鏡代碼

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com