onmousewheel event 缩放图片效果

时间：2021-01-13 09:51:07|栏目：JavaScript代码|点击：次

<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/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模板实现方法

栏目：JavaScript代码

下一篇：用react-redux实现react组件之间数据共享的方法

本文标题：onmousewheel event 缩放图片效果

本文地址：http://www.codeinn.net/misctech/44506.html

更多JavaScript代码

JavaScript代码

onmousewheel event 缩放图片效果

阅读排行

推荐教程