滚轮

最新推荐文章于 2024-05-28 10:04:31 发布

易拉易拉罐

最新推荐文章于 2024-05-28 10:04:31 发布

阅读量108

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/wuxiao18/article/details/97538733

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

元素会根据滚轮的滚动改变大小，具体解释在代码中有注释，以及浏览器兼容问题都有解决

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				height: 100px;
				width: 100px;
				background-color: red;	
			}
			body{
				height: 2000px;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				/*当鼠标滚轮向下滚动时，box1边长
				 * 当鼠标滚轮向下滚动时，box1变短
				 * 
				*/
				var box1=document.getElementById("box1");
				
				box1.onmousewheel=function(event){
					
					event=event||window.event;
					/*判断滚轮滚动方向*/
					//event.wheelDela 可以获取鼠标滚轮滚动方向
					//向上滚120  向下滚-120，但火狐不支持此方法
					/*
					 在火狐中用event.detail来获取滚动方向
					 向上滚-3，向下滚3
					 * */ 
					 if(event.wheelDelta > 0 || event.detail < 0){
					 	//向上滚，box1变短
					 	box1.style.height = box1.clientHeight-10+"px";
					 }else{
					 	//向下滚box1变长
					 	box1.style.height = box1.clientHeight+10+"px";
					 }
					 /*由于IE8不支持此方法，所以用以下语句有就用没有就不用*/
					 event.preventDefault && event.preventDefault();
					 return false;
				};
				
				/*绑定鼠标滚轮滚动事件*/
				/*
				 * 火狐不支持onmousewheel
				 * 火狐中需使用DOMMouseScroll来绑定滚动事件
				 * 需要通过addEventListener()函数来绑定
				 * 
				 * */
				bind(box1,"DOMMouseScroll",box1.onmousewheel);
				
				/*当浏览器有滚动条时，滚轮滚动会随之滚动，这是浏览器的默认样式*/
				//return false;可以取消默认样式
				//但是火狐使用的是addEventListener()方法绑定响应函数，取消默认行为时不能使用return false;
				//可以用event.preventDefault()取消默认行为
				
			};
			function bind(obj,eventStr,callback){
				if(obj.addEventListener){
					obj.addEventListener(eventStr,callback,false);
				}else{
					obj.attachEvent("on"+enentStr,function(){
						callback.call(obj);
					});
				}
			};
		</script>
	</head>
	<body >
		<div id="box1"></div>
	</body>
</html>

易拉易拉罐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚轮

元素会根据滚轮的滚动改变大小，具体解释在代码中有注释，以及浏览器兼容问题都有解决<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ h...
复制链接

扫一扫

专栏目录