一個(gè)簡(jiǎn)單的javascript圖片放大效果代碼
更新時(shí)間：2010年08月10日 00:30:21 作者：
javascript圖片放大效果多用于小圖片產(chǎn)品的展示。
一個(gè)簡(jiǎn)單的圖片放大效果:
參數(shù)說(shuō)明:
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需再刷新一下頁(yè)面才能執(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需再刷新一下頁(yè)面才能執(zhí)行]
參數(shù)說(shuō)明:
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需再刷新一下頁(yè)面才能執(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需再刷新一下頁(yè)面才能執(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)即可看到效果2008-05-05
javascript實(shí)現(xiàn)圖片切換的幻燈片效果源代碼
網(wǎng)頁(yè)上有許多圖片切換的幻燈片效果,它們大多用flash實(shí)現(xiàn),那javascript能不能實(shí)現(xiàn)他們呢,當(dāng)然可以,我自己寫了一個(gè),需要的朋友可以參考下2012-12-12
超級(jí)簡(jiǎn)單的圖片防盜(HTML),好用...2007-04-04
javascript批量檢查當(dāng)圖片不存在時(shí)則顯示默認(rèn)圖片的代碼
批量檢查圖片地址顯示是不是有錯(cuò)誤，在ie瀏覽器中是有當(dāng)圖片不存在時(shí)的onerror事件的，下面的代碼即是非常不錯(cuò)的應(yīng)用。2008-09-09
2007-12-12
非常漂亮的js放大鏡效果代碼，對(duì)于瀏覽圖片效果應(yīng)該不錯(cuò)哦2008-05-05
Blocksit插件實(shí)現(xiàn)瀑布流數(shù)據(jù)無(wú)限( 異步)加載
BlocksIt 瀑布流插件是基于jquery的，使用也非常簡(jiǎn)單，是為數(shù)不多的幾款動(dòng)態(tài)瀑布流插件之一。2014-06-06
超級(jí)經(jīng)典一套鼠標(biāo)控制左右滾動(dòng)圖片帶自動(dòng)翻滾
鼠標(biāo)控制左右滾動(dòng)圖片帶自動(dòng)翻滾2008-06-06
就是在客戶端判斷上傳圖片的大小，尺寸，并生成預(yù)覽圖，用JavaScript實(shí)現(xiàn)的啊2008-10-10
jQuery.lazyload+masonry改良圖片瀑布流代碼
這里主要是使用jQuery.lazyload配合masonry實(shí)現(xiàn)瀑布流的重新排列，有時(shí)候網(wǎng)站的速度慢，圖片加載慢，獲取不到圖片的寬度和高度，所以使用lazyload可以在圖片加載完之后，進(jìn)行瀑布流的重新排列。2014-06-06