管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

一个简单的javascript图片放大效果代码

　　一个简单的图片放大效果:

　　参数说明:

　　1.berviary:String,需要被放大的图片id

　　2.expand:object,放大区域,如果不设置此项或者此项的id未设置,则默认为光标跟随模式,会自动创建用于显示放大区域的div.

　　3.clip:object,裁剪区域的大小,即鼠标移动到需要放大的图片上时,突出显示需要被放的大区域

　　4.opacity:float,放大时图片被遮罩的区域的透明度

　　效果1:

　　调用的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需刷新才能执行]

　　效果2:

　　调用的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需刷新才能执行]

教程首页 更多教程