欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-21 23:37:56
一个简单的图片放大效果: 参数说明: 1.berviary:string,需要被放大的图片id 2.expand:object,放大区域,如果不设置此项或者此项的id未设置...
一个简单的图片放大效果:
参数说明:
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需刷新才能执行]