javascript滚轮事件基础实例讲解（37）
更新时间：2017年02月14日 17:18:49 作者：厚积薄发2017
这篇文章主要为大家详细介绍了javascript滚轮事件基础实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JS中改变this指向的方法(call和apply、bind)
this是javascript的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象，通过本文给大家介绍JS中改变this指向的方法(call和apply、bind)，需要的朋友参考下2016-03-03
这篇文章主要介绍了BootStrap 实现各种样式的进度条效果,代码分为动态和叠加两种效果，需要的朋友可以参考下2016-12-12
本篇文章主要介绍了webpack打包node.js后端项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
本文结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。对bootstrap表格组件相关知识感兴趣的朋友一起学习吧2016-05-05
这篇文章主要为大家详细介绍了js实现全选和全不选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
这篇文章主要为大家详细介绍了layui实现下拉框三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
一次性给页面上的控件赋值，控件的ID和数据库表字段对应一样，这样就一次性搞定了2010-06-06
数据结构是一种有效处理大量数据的手段，了解它的结构和组成为我们提供了更有效的工具来设计与某些问题相关的产品。这次我们将进行链表介绍，回顾它的特点和用途2022-10-10
bootstrap中的 form表单属性role="form"的作用详解
这篇文章主要介绍了bootstrap中的 form表单属性role="form"的作用详解,非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-01-01
这篇文章主要介绍了JavaScript之json，JSON它是一种数据交换格式。有兴趣的可以了解一下2017-06-06
最新评论