添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 建站教程 > JavaScript教程 >

JS判断鼠标滚轮方向事件-网站制作前端技术

时间:2014-07-07      来源:互联网     

判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个值,detail只取±3,其中负数表示向上、正数表示向下,wheelDelta只取±120,其中正数表示为向上,负数表示向下。
 

效果请复制以下代码测试:

<!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=utf-8" />
<title>JS判断鼠标滚轮方向事件-【科e互联】</title>
<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>
 <p id="txt"></p>
 <script type="text/javascript">
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;
    }
    ScrollText(direct);
}
/*注册事件*/
if(document.addEventListener){
    document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
</script>
</body>
</html>
相关文章

大家都在看

最新更新