JavaScript 動畫 1---速度動畫

時間 2019-11-17

原文原文鏈接

一、描述

鼠標懸浮則 10px/30ms向右運動、鼠標離開 10px/30ms 向左運動/html

二、要點

隱藏部分left值設爲 -200 。向右運動時，offsetLeft目標爲0，向左運動 offsetLeft目標爲-200函數

假設 obj 爲某個 HTML 控件spa

obj.offsetTop 指 obj 相對於版面或由 offsetParent 屬性指定的父座標的計算上側位置，整型，單位像素。code

obj.offsetLeft 指 obj 相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置，整型，單位像素。htm

obj.offsetWidth 指 obj 控件自身的絕對寬度，不包括因 overflow 而未顯示的部分，也就是其實際佔據的寬度，整型，單位像素。seo

obj.offsetHeight 指 obj 控件自身的絕對高度，不包括因 overflow 而未顯示的部分，也就是其實際佔據的高度，整型，單位像素。ip

style.left:
定位元素與包含它的矩形左邊界的偏移量get

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style>
	body,div,span{
		margin: 0;
		padding: 0;
	}
	#div1{
		width: 200px;
		height:200px;
		background:red;
		position: relative;
		left: -200px;
	}
	#div1 span{
		width: 20px;
		height: 100px;
		background: blue;
		position: absolute;
		left: 200px;
		top: 50px;
	}
	</style>
	
	<script>
	var timer = null;
		window.onload = function(){
			
			var cDiv1 = document.getElementById('div1');
			
			//鼠標移入
			cDiv1.onmouseover = function(){
				startMove(10,0); //移動函數
			}
			
			//鼠標移出
			cDiv1.onmouseout = function(){
			    startMove(-10,-200); //移動函數
			}
			
			/**
			 * 
			 * @param {速度} speed
			 * @param {目標} iTarget
			 */
			function startMove(speed,iTarget){
				
				clearInterval(timer); //爲了不定時器屢次觸發
				
				var cDiv1 = document.getElementById('div1');
				timer = setInterval(function(){
					if(cDiv1.offsetLeft == iTarget){
						clearInterval(timer); //中止定時器
					}else{
					cDiv1.style.left = cDiv1.offsetLeft+speed+'px'; //offsetLeft當前位置的值
					}
				},30)
			}//每30毫秒動一下
		}
		
		
	</script>
	</head>
	<body>
		<div id="div1">
			<span id="share">側邊廣告</span>
		</div>
	</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。