放大鏡效果 常用的js組件jquery.imagezoom,jquery.jqzoom,jquery.zoom等 這些組件大同小異。 大家感興趣的話可以去百度一下。
本文主要是使用非組件方法來做放大鏡效果。
每一張圖片都要生成三種尺寸,否則放大鏡的效果不會太明顯,這里是 54X54 320X320 800X800。
首先看效果:鼠標經過小圖時,大圖隨之切換。
首先是html
這里id為move的div是放大鏡的手柄 id為detailPic的div是右側放大鏡
css
.infoimg { float: left; padding: 0 20px 30px 0; position: relative; width: 320px; } .infoimg img { display: block; height: 320px; width: 320px; } .allImg { height: 58px; margin: 15px 0 0 10px; overflow: hidden; width: 310px; } .allImg img { cursor: pointer; float: left; height: 54px; margin-right: 3px; padding: 2px; width: 54px; } .allImg img.current { border: 1px solid #f1f1f1; padding: 1px; } .mainImg { position: relative; } .mainImg .zoom_pup { background: url("../images/zoom_pup.png") repeat 0 0; cursor: move; height: 175px; left: 0px; position: absolute; top: 160px; width: 175px; display: none; } .big_pic { background-color:#fff; border: 1px solid #f5f5f5; height: 400px; left: 320px; overflow: hidden; position: absolute; text-align: center; top: 0; width: 400px; display: none; } .big_pic img{ width: 800px; height: 800px;}
JS代碼
當然這里最下面一排小圖片 還缺少一個功能,就是當圖片大于5張的時候可以左右滾動圖片,這樣可以容納大于5張的圖片。這里項目中使用的圖片一般都小于5張,因此這個功能沒有,大家可以參考一下當當或京東。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com