基于jQuery仿淘寶產品圖片放大鏡特效_jquery

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

基于jQuery仿淘寶產品圖片放大鏡特效_jquery

基于jQuery仿淘寶產品圖片放大鏡特效_jquery:在開發商城的時候，往往會用到圖片的放大功能，這里把自己在近期項目中使用的放大鏡特效做一下總結(非插件)。放大鏡效果常用的js組件jquery.imagezoom，jquery.jqzoom，jquery.zoom等這些組件大同小異。大家感興趣的話可以去搜索引擎搜索。本文主要是使用非

推薦度：

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

導讀基于jQuery仿淘寶產品圖片放大鏡特效_jquery:在開發商城的時候，往往會用到圖片的放大功能，這里把自己在近期項目中使用的放大鏡特效做一下總結(非插件)。放大鏡效果常用的js組件jquery.imagezoom，jquery.jqzoom，jquery.zoom等這些組件大同小異。大家感興趣的話可以去搜索引擎搜索。本文主要是使用非

在開發商城的時候，往往會用到圖片的放大功能，這里把自己在近期項目中使用的放大鏡特效做一下總結(非插件)。

放大鏡效果常用的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