鼠标在图片上滚动放大或者缩小图片的代码

 

< HTML >
< HEAD >


< TITLE > onMouseWheel Event Sample </ TITLE >

<!--  <LINK REL="stylesheet" HREF="/workshop/basicSDKIE4.css" TYPE="text/css">  -->

< STYLE >
BODY{}{
 background:#FFFFFF;
 color:black;
 font-size:.75em;
 font-family:verdana;
 }
H1 {}{
 color:#3366CC;
 font-size:1.5em;
 }
IMG {}{ 
    border:2px solid #000000;
    margin:10px;
 } 
A  {}{
 color:#3366CC;
 text-decoration:none;
 }   
</ STYLE >
< 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 >
<!-- TOOLBAR_START -->
<!-- TOOLBAR_EXEMPT -->
<!-- TOOLBAR_END -->
< BODY >

< h1 > onmousewheel event </ h1 >
< P >
This sample uses the onmousewheel event to expand or contract the picture below.  < br >< br >

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 >
< br >
< img  id ="oImage"  src ="/workshop/graphics/sprinter.jpg"  onmousewheel ="return Picture();"   >

< br >
< br >
< br >
< A  CLASS ="clsIncCpyRt"  HREF ="http://www.microsoft.com/isapi/gomscom.asp?TARGET=/info/cpyright.htm"  TARGET ="_top" > &copy;  2006 Microsoft Corporation. All rights reserved. Terms of use </ A > .
</ BODY >
</ HTML >

Demo:http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/onmousewheelEX.htm

转载于:https://www.cnblogs.com/genson/archive/2006/11/09/555368.html