javascript滚轮事件基础实例讲解(37)
2017-02-14 17:18
543 查看
本文实例为大家分享了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事件的传播基础实例讲解(35)
- javascript事件的绑定基础实例讲解(34)
- JavaScript基础应用 制作无缝滚动图实例与DOM基础知识讲解
- JavaScript事件方法(实例讲解)
- javascript基础四 (事件应用鼠标滚轮)
- javascript基础知识之html5轮播图实例讲解(44)
- 实例讲解javascript注册事件处理函数
- javascript实例教程:事件委托讲解
- javascript基础(滚轮的事件)(三十七)
- 实例讲解javascript注册事件处理函数
- C#接口基础知识实例讲解
- javascript基础实例教程(三)
- 通过文档事件处理程序引入JavaScript脚本代码实例
- 《JavaScript 基础教程(第6版)》第三章中的Bingo卡片程序实例
- C#接口基础知识实例讲解
- javascript 兼容鼠标滚轮事件
- javascript基础实例教程(一)
- [C#] C#事件与接口实例讲解分析
- [零基础学JAVA]Java SE应用部分-31.Java IO操作(05)IO操作实例讲解之实现简单MIS 推荐
- JavaScript基础之继承(附实例) [ZT]