一个简单的图片放大效果:
参数说明:
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需刷新才能执行]
您可能感兴趣的文章:
- javascript 图片放大效果函数
- javascript 图片放大缩小功能实现代码
- javascript完美拖拽的实现方法
- JavaScript图片放大技术(放大镜)实现代码分享
- 原生javascript实现DIV拖拽并计算重复面积
- Javascript 拖拽的一些简单的应用(逐行分析代码，让你轻松了拖拽的原理)
- JavaScript实现文字与图片拖拽效果的方法
- javascript实现了照片拖拽点击置顶的照片墙代码
- javascript实现完美拖拽效果
- JavaScript实现的简单拖拽效果
- JavaScript实现可拖拽的拖动层Div实例
- js实现图片放大和拖拽特效代码分享
