• 鼠标滚轮事件


    <div class="box" id="div1">
        <div style="margin-top:0;">
            <p id="p">这是这块区域的内容内容内容内容内容内容内容内容内容</p>
            <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
            <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
            <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
            <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
            <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
            <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
            <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
            <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
            <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
            <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
            <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
            <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
            <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p>
        </div>
    </div>
    .box{position:relative;}
    #div1{
           width:500px;
           height:300px;
           background:#ffff00;
           margin:0 auto;
           overflow:hidden;
           padding:10px;
       }
    window.onload = function () {
            var oDiv = document.getElementById('div1');
            var p=document.getElementById('p');
            function onMouseWheel(ev) {/*当鼠标滚轮事件发生时,执行一些操作*/
                var ev = ev || window.event;
                var down = true; // 定义一个标志,当滚轮向下滚时,执行一些操作
                down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0; //这是对浏览器的兼容性测试
                                        //console.log(ev.wheelDelta);//鼠标滚轮向下滚动时,谷歌、ie浏览器打印出-120;不兼容火狐
                                        //console.log(ev.detail);//鼠标滚轮向下滚动时,火狐打印出3,只在火狐上有用
    if(down){
    //alert('鼠标向下滚动'); //console.log(oDiv.children[0].style.marginTop); var i=oDiv.children[0].style.marginTop; i=parseInt(i); console.log(i); if(i==(-180)){ return false; } i=i-10; oDiv.children[0].style.marginTop=i+'px'; //return false阻止默认事件,可以看成跳出本次事件执行,执行它之后,它之后的事件都不被执行 }else{ //alert('鼠标向上滚动'); var i1=oDiv.children[0].style.marginTop; i1=parseInt(i1); if(i1==0){ return false; } console.log(i1); i1=parseInt(i1)+10; oDiv.children[0].style.marginTop=i1+'px'; } if(ev.preventDefault){/*FF 和 Chrome*/ ev.preventDefault();// 阻止默认事件 } return false; } addEvent(oDiv,'mousewheel',onMouseWheel); addEvent(oDiv,'DOMMouseScroll',onMouseWheel); } function addEvent(obj,xEvent,fn) { if(obj.attachEvent){ obj.attachEvent('on'+xEvent,fn); }else{ obj.addEventListener(xEvent,fn,false); }

    上面代码出来的效果如下:

    鼠标在黄色区域滚轮滚动时,绿框的内容随之滚动,这是鼠标的滚轮事件。

  • 相关阅读:
    医疗设备软件的安全性问答
    python使用技巧
    C++对象模型
    面向对象方法综述
    如何设计可扩展性系统架构
    敏捷过程
    python中import的相关知识总结
    软件架构的关键原则
    读后感——程序员的思维修炼
    LINUX系统备份工具
  • 原文地址:https://www.cnblogs.com/zhaixr/p/6520287.html
Copyright © 2020-2023  润新知