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

 

<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>
<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
posted @ 2006-11-09 14:51  永不言败  阅读(940)  评论(0编辑  收藏  举报