onmousewheel event 缩放图片效果

<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>

<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>