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