一個(gè)簡(jiǎn)單的javascript圖片放大效果代碼
更新時(shí)間：2010年08月10日 00:30:21 作者：
javascript圖片放大效果多用于小圖片產(chǎn)品的展示。
一個(gè)簡(jiǎn)單的圖片放大效果:
參數(shù)說明:
1.berviary:String,需要被放大的圖片id
2.expand:object,放大區(qū)域,如果不設(shè)置此項(xiàng)或者此項(xiàng)的id未設(shè)置,則默認(rèn)為光標(biāo)跟隨模式,會(huì)自動(dòng)創(chuàng)建用于顯示放大區(qū)域的div.
3.clip:object,裁剪區(qū)域的大小,即鼠標(biāo)移動(dòng)到需要放大的圖片上時(shí),突出顯示需要被放的大區(qū)域
4.opacity:float,放大時(shí)圖片被遮罩的區(qū)域的透明度
效果1:
調(diào)用的js代碼:
$E({berviary:"currentPic",expand:{id:"expand",style:{}},clip:{width:"50px",height:"50px"},opacity:"0.2"});
html代碼:
<div>
<div class="img_warp" id="img_warp">
<img src="1.jpg" alt="" class="current" id="currentPic" />
</div>
<div class="expand" id="expand" style="border: 1px solid #555; width:400px; height:400px;margin:-200px auto 0 auto; overflow:hidden;"></div>
</div>
演示效果:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
效果2:
調(diào)用的js代碼:
$E({berviary:"currentPic",clip:{width:"100px",height:"100px"},opacity:"0.4"});
html代碼:
<div>
<div class="img_warp" id="img_warp">
<img src="1.jpg" alt="" class="current" id="currentPic" />
</div>
</div>
演示效果:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
參數(shù)說明:
1.berviary:String,需要被放大的圖片id
2.expand:object,放大區(qū)域,如果不設(shè)置此項(xiàng)或者此項(xiàng)的id未設(shè)置,則默認(rèn)為光標(biāo)跟隨模式,會(huì)自動(dòng)創(chuàng)建用于顯示放大區(qū)域的div.
3.clip:object,裁剪區(qū)域的大小,即鼠標(biāo)移動(dòng)到需要放大的圖片上時(shí),突出顯示需要被放的大區(qū)域
4.opacity:float,放大時(shí)圖片被遮罩的區(qū)域的透明度
效果1:
調(diào)用的js代碼:
復(fù)制代碼 代碼如下:
$E({berviary:"currentPic",expand:{id:"expand",style:{}},clip:{width:"50px",height:"50px"},opacity:"0.2"});
html代碼:
復(fù)制代碼 代碼如下:
<div>
<div class="img_warp" id="img_warp">
<img src="1.jpg" alt="" class="current" id="currentPic" />
</div>
<div class="expand" id="expand" style="border: 1px solid #555; width:400px; height:400px;margin:-200px auto 0 auto; overflow:hidden;"></div>
</div>
演示效果:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
效果2:
調(diào)用的js代碼:
復(fù)制代碼 代碼如下:
$E({berviary:"currentPic",clip:{width:"100px",height:"100px"},opacity:"0.4"});
html代碼:
復(fù)制代碼 代碼如下:
<div>
<div class="img_warp" id="img_warp">
<img src="1.jpg" alt="" class="current" id="currentPic" />
</div>
</div>
演示效果:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- javascript 圖片放大效果函數(shù)
- javascript 圖片放大縮小功能實(shí)現(xiàn)代碼
- javascript完美拖拽的實(shí)現(xiàn)方法
- JavaScript圖片放大技術(shù)(放大鏡)實(shí)現(xiàn)代碼分享
- 原生javascript實(shí)現(xiàn)DIV拖拽并計(jì)算重復(fù)面積
- Javascript 拖拽的一些簡(jiǎn)單的應(yīng)用(逐行分析代碼，讓你輕松了拖拽的原理)
- JavaScript實(shí)現(xiàn)文字與圖片拖拽效果的方法
- javascript實(shí)現(xiàn)了照片拖拽點(diǎn)擊置頂?shù)恼掌瑝Υa
- javascript實(shí)現(xiàn)完美拖拽效果
- JavaScript實(shí)現(xiàn)的簡(jiǎn)單拖拽效果
- JavaScript實(shí)現(xiàn)可拖拽的拖動(dòng)層Div實(shí)例
- js實(shí)現(xiàn)圖片放大和拖拽特效代碼分享
相關(guān)文章
JavaScript 控制圖片改變重疊順序的代碼(鼠標(biāo)移動(dòng)切換)
JavaScript實(shí)例，通過控制Html網(wǎng)頁元素，來控制圖片的重疊順序，鼠標(biāo)移上某一張，那一張就顯示在最前面，移動(dòng)到最后層，它會(huì)顯示在最前，有意思吧，其實(shí)挺簡(jiǎn)單。2010-10-10
2008-01-01
2008-03-03
推薦一個(gè)不錯(cuò)的圖片瀏覽效果...2007-06-06
一款實(shí)用的圖片預(yù)加載技術(shù)，真正實(shí)現(xiàn)加載完成顯示圖片，加載過程中顯示進(jìn)度指示，本加載可以批量進(jìn)行，將成批圖片加載完成才顯示，使用循環(huán)依次載入圖片，并將路徑暫存在數(shù)組中，加載完成后取出數(shù)組數(shù)據(jù)并顯示。2009-11-11
純CSS實(shí)現(xiàn)的當(dāng)鼠標(biāo)移上圖片添加陰影效果代碼
這個(gè)效果挺實(shí)用，當(dāng)把鼠標(biāo)放到一幅靜止的圖片上，圖片的四周邊框會(huì)出現(xiàn)陰影，具有立體感的效果，代碼是第二次修正，能適應(yīng)大小不同的圖片，值得大家嘗試一用哦。2009-12-12
JavaScript判斷圖片是否能夠加載,失敗則替換默認(rèn)圖片
JavaScript智能判斷圖片是否能夠正確加載，若加載失敗則用默認(rèn)圖片替換，這是個(gè)比較實(shí)用的功能，不少網(wǎng)站都可見到這種功能.2010-10-10
一個(gè)CSS布局實(shí)例，介紹的是一個(gè)橫向排列的圖片列表，這也是大家在從事網(wǎng)頁布局時(shí)候最常見的一種布局實(shí)例，有必要掌握，本代碼已經(jīng)過了優(yōu)化，個(gè)別細(xì)節(jié)你需根據(jù)你的網(wǎng)站主CSS風(fēng)格進(jìn)行調(diào)整，才能完美搭配。2010-03-03
在圖片上單擊鼠標(biāo)，獲取圖片的原始尺寸大小，變通一下我們可以實(shí)現(xiàn)讓圖片隨網(wǎng)頁的大小而自動(dòng)適應(yīng)，我們可以判斷如果圖片超出規(guī)定大小，則強(qiáng)制壓縮圖片，運(yùn)行一下看效果吧。2009-10-10
js 加載時(shí)自動(dòng)調(diào)整圖片大小
又一個(gè)javascript自動(dòng)調(diào)整圖片大小的腳本2008-05-05