onmousewheel event 缩放图片效果

2019-11-21 02:32:11

字体：大中小

来源：转载

供稿：网友

<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="https://www.jb51.net//www.VeVB.COm/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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

上一篇：js的event详解。

下一篇：农历与西历对照