一个简单的图片放大效果: 参数说明: 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> 演示效果: .img_warp {width:318px; _height:199px; _overflow:hidden; border:1px solid #ccc;padding:0px;margin-left:0px; margin-top:0px; position:absolute;top:0px; left:0px;} .img_warp{position:relative;top:0px; left:0px;/*cursor:crosshair*/} .img_warp .current{ width:318px;height:199px} [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> 演示效果: .img_warp {width:318px; _height:199px; _overflow:hidden; border:1px solid #ccc;padding:0px;margin-left:0px; margin-top:0px; position:absolute;top:0px; left:0px;} .img_warp{position:relative;top:0px; left:0px;/*cursor:crosshair*/} .img_warp .current{ width:318px;height:199px} [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　JavaScript中关于indexOf的使用方法与问题小结

这个方法相当有用，很多编程语言中都有相对应的实现,javascript中也不例外，然而当我在ie中运行如下代码时候： 复制代码 代码如下: var arr = [1,2,3]; alert(arr.indexOf(1)); 却被提示“对象不支持此属性和方法>>>详细阅读

本文标题：一个简单的javascript图片放大效果代码

地址：http://www.17bianji.com/kaifa2/JS/25881.html

 1/2    1