<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滚轮取值效果 -http://www.jb51.net/</title>
</head>
<body>
<p><label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta" /></p>
<p><label for="detail">滚动值:(Firefox)</label><input type="text" id="detail" /></p>
<script type="text/javascript">
/***********************
* 函数:判断滚轮滚动方向
* 作者:walkingp
* 参数:event
* 返回:滚轮方向 1:向上 -1:向下
*************************/
var scrollFunc=function(e){
var direct=0;
e=e || window.event;
var t1=document.getElementById("wheelDelta");
var t2=document.getElementById("detail");
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail){//Firefox
t2.value=e.detail;
}
}
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
</script>
</body>
</html>
//下面是用滚轮事件实现地图向上缩小,向下放大的功能mapsmaller()和mapbigger()方法需要自己写
<script type="text/javascript">
var scrollFunc=function(e){
var direct=0;
e=e || window.event;
var t1;
var t2;
if(e.wheelDelta){//IE/Opera/Chrome
if(e.wheelDelta>0)
{
//缩小
mapsmaller();
}
else
{
//放大
mapbigger();
}
}else if(e.detail){//Firefox
if(e.detail>0)
{
//缩小
mapsmaller();
}
else
{
//放大
mapbigger();
}
}
}
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
</script>