通过鼠标中间滚轮来缩放图片大小

 

<% @ Page Language="C#" AutoEventWireup="true" CodeFile="Default12.aspx.cs" Inherits="Default12"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title > 无标题页 </ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
         < img  onmousewheel ="return bbimg(this)"  src ="images/__scale__1_227959004.gif"   />
         < span  style ="font-weight: bold" > Size =  < span  id ="oCounter"  style ="color: red;" > 100% </ span ></ span >
         < img  id ="oImage"  src ="images/__scale__1_227959004.gif"  onmousewheel ="return Picture();"   />
     </ form >
</ body >
</ html >

< script  language ="JavaScript"  type ="text/javascript" >   
function bbimg(o){
var zoom=parseInt(o.style.zoom,10)||100;
zoom+=event.wheelDelta/12;
if(zoom>0) o.style.zoom=zoom+'%';
return false;}
  
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){  
if (count >=1){
document.getElementById("oImage").style.zoom = count + '0%';  
oCounter.innerText = count + '0%';  }
}  
</ script >