javascript滚轮事件基础实例讲解(37)


Posted in Javascript onFebruary 14, 2017

本文实例为大家分享了js滚轮事件的具体代码,供大家参考,具体内容如下

<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
      #box1{ 
        width: 100px; 
        height: 100px; 
        background-color: red; 
      } 
       
    </style> 
     
    <script type="text/javascript"> 
       
      window.onload = function(){ 
         
        //使div可以跟随鼠标滚轮滚动来改变高度 
        //滚轮向下滚,div变高 滚轮向上滚 div变短 
         
        //获取box1 
        var box1 = document.getElementById("box1"); 
         
        /* 
         * onmousewheel 
         * - 鼠标滚轮滚动的事件,但是该事件火狐浏览器并不支持 
         * - 在火狐中需要使用DOMMouseScroll,这个事件只能通过addEventListener()来绑定 
         */ 
        //为box1绑定一个鼠标滚轮滚动的事件 
        box1.onmousewheel = function(event){ 
          event = event || window.event; 
           
          //判断滚轮滚动的方向 
          /* 
           * wheelDelta 
           * - 事件对象中的属性,可以用来判断鼠标滚轮滚动的方向 
           * - 向下滚 -120 向上滚 +120 
           * - 该属性的值并不重要,重要的是值的符号,需要通过符号来判断滚动的方向 
           * - 但是该属性火狐浏览器并不支持 
           */ 
          //alert(event.wheelDelta); 
           
          /* 
           * 火狐中通过detail来判断方向 
           * - 向上滚 -3  向下滚 +3 
           */ 
          //alert(event.detail); 
           
          if(event.wheelDelta < 0 || event.detail > 0){ 
            //向下滚 
            //增加box1的高度 
            box1.style.height = box1.offsetHeight + 10 + "px"; 
             
          }else{ 
            //向上滚 
            //减小box1的高度 
            box1.style.height = box1.offsetHeight - 10 + "px"; 
          } 
           
           
          /* 
           * 使用addEventListener()绑定的事件,不能通过return false来取消默认行为 
           * 需要调用事件对象 preventDefault()方法来取消默认行为 
           * 但是在IE8中没有该方法 
           */ 
          event.preventDefault && event.preventDefault(); 
           
          //当页面中有滚动条时,由于滚轮滚动的默认行为会导致页面整体下移 
          //取消默认行为 
          return false; 
           
        }; 
         
        bind(box1 , "DOMMouseScroll" , box1.onmousewheel); 
         
         
      }; 
       
      function bind(obj , eventStr , callback){ 
         
        if(obj.addEventListener){ 
          //如果是正常浏览器 
          obj.addEventListener(eventStr , callback , false); 
        }else{ 
          //IE8 
          obj.attachEvent("on"+eventStr , function(){ 
            callback.call(obj); 
          }); 
        } 
      } 
       
    </script> 
  </head> 
  <body style="height: 3000px;"> 
     
    <div id="box1"></div> 
     
     
  </body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
Node调用Java的示例代码
Sep 20 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
基于canvas的二维码邀请函生成插件
Feb 14 #Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 #Javascript
javascript深拷贝和浅拷贝详解
Feb 14 #Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 #Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 #Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 #Javascript
js基于myFocus实现轮播图效果
Feb 14 #Javascript
You might like
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
Python中处理时间的几种方法小结
2015/04/09 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
Python实现的特征提取操作示例
2018/12/03 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
python为什么要安装到c盘
2020/07/20 Python
Django缓存Cache使用详解
2020/11/30 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
ORACLE第二个十问
2013/12/14 面试题
2015年班级元旦晚会活动总结
2014/11/28 职场文书
大学副班长竞选稿
2015/11/21 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL
python热力图实现的完整实例
2022/06/25 Python