快捷導(dǎo)航

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

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

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

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

實(shí)現(xiàn)效果如下

效果一

效果二

效果三

調(diào)用代碼如下

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

樣式就通過(guò)css來(lái)定義，沒有寫進(jìn)js里面。

源碼下載：點(diǎn)擊這里

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

js+css實(shí)現(xiàn)計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了js+css實(shí)現(xiàn)計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
javascript實(shí)現(xiàn)動(dòng)態(tài)顯示顏色塊的報(bào)表效果
本文主要介紹了javascript實(shí)現(xiàn)動(dòng)態(tài)顯示顏色塊的報(bào)表效果的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-04-04
js實(shí)現(xiàn)表格單列按字母排序
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)表格單列按字母排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
Javascript連接數(shù)據(jù)庫(kù)查詢并插入數(shù)據(jù)
這篇文章主要介紹了Javascript連接數(shù)據(jù)庫(kù)查詢并插入數(shù)據(jù)，下面文章圍繞主題展開詳細(xì)內(nèi)容，具有一的參考價(jià)值，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助
2022-03-03
Javascript查詢DBpedia小應(yīng)用實(shí)例學(xué)習(xí)
本文則嘗試?yán)肧PARQLWrapper.js來(lái)讀取DBpedia的數(shù)據(jù)，并顯示出來(lái),感興趣的你可以參考下，或許對(duì)你有所幫助
2013-03-03
js監(jiān)聽鍵盤事件的方法_原生和jquery的區(qū)別詳解
下面小編就為大家?guī)?lái)一篇js監(jiān)聽鍵盤事件的方法_原生和jquery的區(qū)別詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
提交按鈕的name＝''submit''引起的js失效問(wèn)題及原因
這篇文章主要介紹了提交按鈕的name＝'submit'引起的js失效問(wèn)題及原因,需要的朋友可以參考下
2015-02-02
vue-router路由懶加載的實(shí)現(xiàn)（解決vue項(xiàng)目首次加載慢）
這篇文章主要介紹了vue-router路由懶加載的實(shí)現(xiàn)（解決vue項(xiàng)目首次加載慢），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
基于JavaScript實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01
Openlayers繪制地圖標(biāo)注
這篇文章主要為大家詳細(xì)介紹了Openlayers繪制地圖標(biāo)注，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09