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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
Javascript string 扩展库代码
Apr 09 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
基于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
PHP中的替代语法介绍
2015/01/09 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
JS交换变量的方法
2015/01/21 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python批量查询域名是否被注册过
2017/06/21 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
Django 框架模型操作入门教程
2019/11/05 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
python add_argument()用法解析
2020/01/29 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
自荐信格式技巧有哪些呢
2013/11/19 职场文书
会计自荐信范文
2014/03/09 职场文书
售后服务承诺书
2014/03/26 职场文书
活动总结的格式
2014/05/07 职场文书
委托书的格式
2014/08/01 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
服务员态度差检讨书
2014/10/28 职场文书
Python基础知识之变量的详解
2021/04/14 Python
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android
vue elementUI批量上传文件
2022/04/26 Vue.js