master

分支 (1)

管理

管理

master

lnmpbroter
/
106.写一个滚轮事件.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        #div1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
        }
    </style>
    <script>
        window.onload=function () {
            //捕获一个div
            var div1=document.getElementById("div1");
            //给div一个滚轮事件
            function a(event) {
                event=event||window.event;
                //alert(event.wheelDelta||event.detail);//detail是火狐中支持的

                function up() {
                    div1.style.height=div1.clientHeight+10+"px";//clientHeight是可见高度
                }
                function down() {
                    div1.style.height=div1.clientHeight-10+"px";
                }

                if(event.wheelDelta){
                    if (event.wheelDelta>0){
                        // alert("向上");
                        up();
                    }else{
                        //alert("向下");
                        down()
                    }
                }else{
                    if (event.detail<0){
                        //alert("向上");
                        up();
                    }else{
                        //alert("向下");
                        down()
                    }
                }
                //return false//为了使滚动事件只发生在div内，而非body内
                event.preventDefault();//绑定函数的函数不接受return false
            }

            if (div1.addEventListener){
                div1.addEventListener("DOMMouseScroll",a,false)||div1.addEventListener("mousewheel",a,false);//给火狐或者谷歌绑定
            }else{
                div1.attachEvent("onmousewheel",a);//给ie绑定
            }
        }


    </script>
</head>
<body>
<h1>写一个滚轮事件</h1>
<div id="div1"></div>
</body>
</html>