管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

onmousewheel event 缩放图片效果

<HTML>  
<HEAD>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<TITLE>onMouseWheel Event Sample－www.51windows.Net</TITLE>  
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%3E%20%20%0D%0Avar%20count%20%3D%2010%3B%20%20%0D%0Afunction%20Picture()%20%20%0D%0A%7B%20%20%0D%0Acount%20%3D%20Counting(count)%3B%20%20%0D%0AResize(count)%3B%20%20%0D%0Areturn%20false%3B%20%20%0D%0A%7D%20%20%0D%0Afunction%20Counting(count)%7B%20%20%0D%0Aif%20(event.wheelDelta%20%3E%3D%20120)%20%20%0D%0Acount%2B%2B%3B%20%20%0D%0Aelse%20if%20(event.wheelDelta%20%3C%3D%20-120)%20%20%0D%0Acount--%3B%20%20%0D%0Areturn%20count%3B%20%20%0D%0A%7D%20%20%0D%0Afunction%20Resize(count)%7B%20%20%0D%0AoImage.style.zoom%20%3D%20count%20%2B%20'0%25'%3B%20%20%0D%0AoCounter.innerText%20%3D%20count%20%2B%20'0%25'%3B%20%20%0D%0A%7D%20%20%0D%0A%3C%2FSCRIPT%3E">  
</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>

<A HREF="http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/onmousewheelEX.htm" _ewebeditor_ta_href="http%3A%2F%2Fmsdn.microsoft.com%2Fworkshop%2Fsamples%2Fauthor%2Fdhtml%2Frefs%2FonmousewheelEX.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需刷新才能执行]

教程首页更多教程