JS鼠标在图片上滚动放大或者缩小图片的代码(javascript)
2010-01-28 15:22:23| 分类:
JS程式
| 标签:
|举报
|字号大中小 订阅
<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="http://hiphotos.baidu.com/xieqingx/pic/item/ebb8dd95e82bd84cd1135e9e.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>
评论这张
转发至微博
转发至微博
评论