页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

onmousewheel event 缩放图片效果

发布：dxy 发布日期：2006-9-6 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<HTML>  
<HEAD>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<TITLE>onMouseWheel Event Sample－www.51windows.Net</TITLE>  
<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>  
<BODY>  
<h1>onmousewheel event</h1>  
  
This sample uses the onmousewheel event to expand or contract the picture below.

Move the cursor over the picture and roll the mouse wheel up and down.  
<span style="font-weight:bold">Size =  
<span id="oCounter" style="color:red;">100%</span></span>

<A HREF="http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/onmousewheelEX.htm" target="_blank">http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/onmousewheelEX.htm</A>.  
</BODY>  
</HTML>  
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">  
<input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'></div>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：onmousewheel event 缩放图片效果

百度中搜索更多的关于onmousewheel event 缩放图片效果内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

文章评论

共有位脚本之家网友发表了评论我来说两句

onmousewheel event 缩放图片效果

文章评论

同类文章

最近更新

热点排行

onmousewheel event 缩放图片效果

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行