1. 程式人生 > >js 滑鼠滾輪事件

js 滑鼠滾輪事件

總結一下滾動滑鼠滾輪,可以左右切換圖片。在網上找的資料,自己進行修改邏輯,完成。

<script>
   var scrollFunc = function (e) {
        var direct = 0;
        e = e || window.event;
        if (e.wheelDelta) {  //判斷瀏覽器IE,谷歌滑輪事件             
            if (e.wheelDelta > 0) { //當滑輪向上滾動時
                alert("滑輪向上滾動");
            }
            if
(e.wheelDelta < 0) { //當滑輪向下滾動時 alert("滑輪向下滾動"); } } else if (e.detail) { //Firefox滑輪事件 if (e.detail> 0) { //當滑輪向上滾動時 alert("滑輪向上滾動"); } if (e.detail< 0) { //當滑輪向下滾動時 alert("滑輪向下滾動"); } } ScrollText(direct); } //給頁面繫結滑輪滾動事件
if (document.addEventListener) { document.addEventListener('DOMMouseScroll', scrollFunc, false); } //滾動滑輪觸發scrollFunc方法 window.onmousewheel = document.onmousewheel = scrollFunc;
</script>

上面這段程式碼可以實現最基本的滑輪滾動事件,實現效果的同時滾動條也在滾動,下面程式碼要做的就是阻止實現效果的時候瀏覽器右側滾動條滾動

e = e || window.event
; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; if (e.preventDefault) e.preventDefault(); else e.returnValue = false;//具體位置看下方程式碼
<script>
   var scrollFunc = function (e) {
        var direct = 0;
    e = e || window.event;
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;


        if (e.wheelDelta) {  //判斷瀏覽器IE,谷歌滑輪事件   

            if (e.wheelDelta > 0) { //當滑輪向上滾動時
                alert("滑輪向上滾動");
            }
            if (e.wheelDelta < 0) { //當滑輪向下滾動時
                alert("滑輪向下滾動");
            }
        } else if (e.detail) {  //Firefox滑輪事件
            if (e.detail> 0) { //當滑輪向上滾動時
                alert("滑輪向上滾動");
            }
            if (e.detail< 0) { //當滑輪向下滾動時
                alert("滑輪向下滾動");
            }
        }
        ScrollText(direct);
    }
    //給頁面繫結滑輪滾動事件
    if (document.addEventListener) {
        document.addEventListener('DOMMouseScroll', scrollFunc, false);
    }
    //滾動滑輪觸發scrollFunc方法  獲取id是效果的作用域,指效果只在這一塊區域有效,超過此區域的不分是滾動條向下滾動

document.getElementById("op_computer_bg").onmousewheel = document.getElementById("op_computer_bg").onmousewheel = scrollFunc;

</script>