鼠标在图片上滚动放大或者缩小图片的代码
<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">© 2006 Microsoft Corporation. All rights reserved. Terms of use</A>.
</BODY>
</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">© 2006 Microsoft Corporation. All rights reserved. Terms of use</A>.
</BODY>
</HTML>
Demo:http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/onmousewheelEX.htm