返回
心录历程
首页
Js实现鼠标滚轮放大缩小图片
2014-05-01 03:03:22 -0400
此代码
仅
供
参
考
代码说明
Js通过鼠标滚轮放大缩小图片，目前为止，仍有不少网站正在使用的效果，运行代码后，请滚动鼠标中间的滚轮，向下滚轮则图片变小，向上滚轮则图片被放大，很实用的效果。
html代码(一)
<!--嵌入js代码--> <script language="javascript"> //放大缩小图片 function bigimg(i) { var zoom = parseInt(i.style.zoom,10)||100; zoom += event.wheelDelta / 12; if(zoom > 0 ) i.style.zoom=zoom+'%'; return false; } </script> <!--图片调用代码--> <img src="http://www.codefans.net/jscss/demoimg/wall7.jpg" width="461" height="277" border="1" onmousewheel="return bigimg(this)">
html代码(二)
<style type="text/css"> <!-- .style1 { color: #FF0000; font-size: 16px; } --> </style> <script language="javascript"> function bigimg(i) { var zoom = parseInt(i.style.zoom,10)||100; zoom += event.wheelDelta / 12; if(zoom > 0 ) i.style.zoom=zoom+'%'; return false; } </script> <table width="100%"> <tr> <td><span class="style1">请滚动鼠标滚轮</span></td> </tr> </table> <center> <img src="http://www.codefans.net/jscss/demoimg/wall7.jpg" width="461" height="277" border="1" onmousewheel="return bigimg(this)"> </center>
html代码(三)
<script language="JavaScript"> <!-- //改变图片大小 function resizepic(thispic){ if(thispic.width>700) thispic.width=700; } //无级缩放图片大小 function bbimg(o){ var zoom=parseInt(o.style.zoom,10)||100; zoom+=event.wheelDelta/12; if(zoom>0) o.style.zoom=zoom+'%'; return false; } --> </script> <body> <!--把下面代码加到<body>与</body>之间--> <img src="/images/zhanghanyun.jpg" width="320" height="240" border="0" onload="javascript:resizepic(this)" onmousewheel="return bbimg(this)"> </body>
代码演示
通过鼠标滚轮放大缩小图片
请把鼠标放在图片上滚动鼠标滚轮
【本站仅供参考，版权归原作者所有】
«Newer
Older»
Comment:
Name:
Back to home
Subscribe
|
Register
|
Login
|
N
