javascript基礎（滾輪的事件）（三十七）

厚積薄發2017發表於2017-02-14
JavaScript事件

1.滾輪事件

<!DOCTYPE html>
<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>


 

相關文章