正文 3110字数 148,882阅读

<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>onMouseWheel Event Sample－www.51windows.Net</TITLE> <SCRIPT> var count = 10; function Picture() { count = Counting(count); Resize(count); return false; } function Counting(count){ if (event.wheelDelta >= 120) count++; else if (event.wheelDelta <= -120) count--; return count; } function Resize(count){ oImage.style.zoom = count + '0%'; oCounter.innerText = count + '0%'; } </SCRIPT> </HEAD> <BODY> <h1>onmousewheel event</h1> <P> This sample uses the onmousewheel event to expand or contract the picture below. Move the cursor over the picture and roll the mouse wheel up and down.</P> <span style="font-weight:bold">Size = <span id="oCounter" style="color:red;">100%</span></span> <img id="oImage" src="http://www.jb51.net/logos.gif" onmousewheel="return Picture();" > <A HREF="http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/onmousewheelEX.htm" target="_blank">http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/onmousewheelEX.htm</A>. </BODY> </HTML> <div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand"> <input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'></div>
Run code
Cut to clipboard



    <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>onMouseWheel缩放图片效果－www.jb51.Net</TITLE> <body> <script> function bbimg(o) { var zoom=parseInt(o.style.zoom, 10)||100; zoom+=event.wheelDelta/12; if (zoom>0) o.style.zoom=zoom+'%'; } function addthis() { var e=window.event?window.event:e; var srcE=e.srcElement?e.srcElement:e.target; if(!srcE) return; //author:reterry(dxy) www.jb51.net欢迎转载，转载时请写明出处。 if (String(srcE.tagName).toLowerCase()=='img'){ //alert('好'); bbimg(srcE) } } function backthis(){ var e=window.event?window.event:e; var srcE=e.srcElement?e.srcElement:e.target; if(!srcE) return; //author:reterry(dxy) www.jb51.net欢迎转载，转载时请写明出处。 if ((String(srcE.tagName).toLowerCase()=='img')&&(window.event.ctrlKey)){ //alert('好'); srcE.style.zoom='100%'; }} document.onmousewheel=addthis; document.onmouseout=backthis; </script> <A id=ImgSpan href="http://www.jb51.net/logos.gif" target=_blank><IMG src="http://www.jb51.net/logos.gif" border=0></A> <br>鼠标滑轮滚动查看效果，Author:reterry(dxy) www.jb51.net欢迎转载，转载时请写明出处。<br>按住ctrl键然后鼠标从图片上移开，图片可恢复原始大小</body></html>
    Run code
    Cut to clipboard