Home > Web Front-end > JS Tutorial > body text

A simple example of js mouse wheel scroll event binding (compatible with mainstream browsers)_javascript skills

WBOY
Release: 2016-05-16 17:03:57
Original
1415 people have browsed it
Copy code The code is as follows:

/**마우스 휠 이벤트에 대한 이벤트 핸들러
*마우스 스크롤 이벤트
*/ 
        var 휠 = 함수(이벤트) { 
            var delta = 0; 
            if (!event) /* IE의 경우. */ 
                이벤트 = window.event; 
            if (event.wheelDelta) { /*모질라 케이스.*/ 
               delta = event.wheelDelta / 120; 
            } else if (event.detail) { 
               /**Mozilla에서는 델타 부호가 IE와 다릅니다.
                 * 또한 델타는 3의 배수입니다.
                */ 
              /**델타가 0이 아니면 처리합니다.
             * 기본적으로 휠이 위로 스크롤되면 델타는 이제 양수이고
             * 휠이 아래로 스크롤되면 음수입니다.
            */ 
               delta = -event.de 꼬리 / 3; 
           } 
            /**마우스 휠로 인한 기본 동작을 방지합니다.
             * 보기 흉할 수도 있지만 스크롤은 어떻게든 처리합니다.
             * 어쨌든, 그러니 여기서는 귀찮게 하지 마세요..
            */ 
            if(델타) 
                핸들(델타); 
            /**초기화 코드. 
         * 자체 이벤트 관리 코드를 사용하는 경우 필요에 따라 변경하세요.
        */ 
            if (event.preventDefault) 
               event.preventDefault(); 
            event.returnValue = false; 
        } 

        /**DOMMouseScroll은 모질라용입니다.*/ 
        if (window.addEventListener) { 
           /**IE/오페라.*/ 
            window.addEventListener(' DOMMouseScroll', 휠, 거짓); 
        } 
        /**이것은 높은 수준의 기능입니다.
         * 델타가 0보다 크거나 작은 경우 반응해야 합니다.
        */ 
        window.onmousewheel = document.onmousewheel = 휠; 

        /***/ 
        var handler = function(delta) { 
            var random_num = Math.floor((Math.random() * 100) 50); 
            if (delta < 0) { 
               // Alert("鼠标滑轮向下滚动:" delta "次!"); // 1
               $("btn_next_pic").onclick(random_num);                                           Mouse wheel scroll up: " delta " times! "); // -1 $ (" btn_last_pic "). Onclick (random_num);
Return;
}
}


Related labels:
js
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template