JS实现图片放大缩小的方法
本文实例讲述了JS实现图片放大缩小的方法。分享给大家供大家参考,具体如下:
最近经常看见有人问怎样放大和缩小图片,我之前也做过一次,下面就把我的方法共享出来。我有2个种方法实现:第一种方法可以兼容IE和火狐(其他的浏览器我没有测试);第二种方法只能兼容IE。
第一种方法很简单,代码如下:
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Image.aspx.cs"Inherits="ImageZoom.Image"%> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server"> <title></title> <styletype="text/css"> img { border:#0000001pxsolid; } </style> <scriptlanguage="JavaScript"type="text/javascript"> //兼容IE和火狐 functionImageChange(args){ varoImg=document.getElementById("img1"); if(args){ oImg.width=oImg.width*1.2; oImg.height=oImg.height*1.2; } else{ oImg.width=oImg.width/1.2; oImg.height=oImg.height/1.2; } } </script> </head> <body> <formid="form1"runat="server"> <div> <imgid="img1"alt="图片"src="images/img1.gif"mce_src="images/img1.gif"/> <br/> <inputid="btn1"type="button"value="放大"onclick="ImageChange(true)"/> <inputid="btn2"type="button"value="缩小"onclick="ImageChange(false)"/> </div> </form> </body> </html>
第二种方法也简单,就是把中间的js方法改变一下,然后给图片框加上style="zoom:100%;",如下
varoImg=document.getElementById("img1"); oImg.style.zoom=parseInt(oImg.style.zoom)+(args?+20:-20)+'%';
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》、《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。