利用javascript實現(xiàn)的三種圖片放大鏡效果實例（附源碼）

更新時間：2017年01月23日 08:37:41 投稿：daisy

這篇文章主要介紹了利用javascript實現(xiàn)的幾種放大鏡效果，很實用一款漂亮的js圖片放大鏡特效，常見于電商網(wǎng)站上產(chǎn)品頁，用來放大展示圖片細節(jié)，很有實用性，推薦下載學(xué)習(xí)研究。文中提供了完整的源碼供大家下載，需要的朋友可以參考借鑒，一起來看看吧。

本文實現(xiàn)的是一款簡單的放大鏡效果，有三種不同的樣式，支持移動端；大家可以直接下載源碼進行學(xué)習(xí)參考，下面來一起學(xué)習(xí)學(xué)習(xí)吧。

實現(xiàn)效果如下

效果一

效果二

效果三

調(diào)用代碼如下

//前面是ID或者Class，后面有init里面參數(shù)分別有1,2,3代表三種不同的效果： 
zoom(‘#item').init(); //這里寫0，或者不寫都可以，默認0 
zoom(‘#item').init(1); //效果2 
zoom(‘#item').init(2); //效果3 
 
//另外還有一個參數(shù)，就是選擇器后面寫上true的話，就是給所有選擇的元素添加放大鏡效果，不寫的話只有第一個有 
zoom(‘#item',true).init();

樣式就通過css來定義，沒有寫進js里面。

源碼下載：點擊這里

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章:

相關(guān)文章

JS 數(shù)組和對象的深拷貝操作示例
這篇文章主要介紹了JS 數(shù)組和對象的深拷貝操作,結(jié)合實例形式分析了JS 數(shù)組和對象的深拷貝基本原理與操作技巧,需要的朋友可以參考下
2020-06-06
javascript 響應(yīng)鍵盤特定按鍵(只響應(yīng)數(shù)字鍵)
響應(yīng)鍵盤特定按鍵(只響應(yīng)數(shù)字鍵),大家可以看看思路。
2009-03-03
js鏈接確認提醒功能
非常不錯的功能，當(dāng)單機一個鏈接時，會彈出確認對話框效果
2008-09-09
uniapp單頁面實現(xiàn)頁面切換的使用示例
本文主要介紹了uniapp單頁面實現(xiàn)頁面切換的使用示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-09-09
KnockoutJS數(shù)組比較算法實例詳解
這篇文章主要介紹了KnockoutJS數(shù)組比較算法實例詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-11-11
BootStrap tab選項卡使用小結(jié)
這篇文章主要為大家詳細介紹了BootStrap tab選項卡使用小結(jié)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
javascript加號"+"的二義性說明
單個的加號作為運算符在 JavaScript 中有三種作用。
2013-03-03
使用純javascript實現(xiàn)經(jīng)典掃雷游戲
本文給大家分享的是個人剛開始學(xué)習(xí)javascript的時候?qū)懙姆聎indows經(jīng)典的掃雷游戲的代碼，當(dāng)時只是寫了下來，沒加注釋，這里補上，有需要的小伙伴可以參考下。
2015-04-04
使用js判斷數(shù)組中是否包含某一元素(類似于php中的in_array())
這篇文章主要是對使用js判斷數(shù)組中是否包含某一元素(類似于php中的in_array())需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
javascript 實現(xiàn)滾動效果代碼整理
javascript 實現(xiàn)滾動效果代碼整理，需要的朋友可以參考下。
2010-03-03