动画效果-多个物体运动

露露mary

于 2019-01-09 23:57:04 发布

阅读量333

点赞数

分类专栏：代码片段

代码片段专栏收录该内容

15 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>动画</title>
<style type="text/css">
	li {
		width: 200px;
		height: 50px;
		list-style: none;
		background-color: red;
		margin-bottom: 10px;
	}
</style>
<script type="text/javascript">
	window.onload = function () {
		var aLi = document.getElementsByTagName('li');
		for(var i = 0;i < aLi.length;i++){
			aLi[i].onmouseover = function(){
				startMove (this,400);
			}
			aLi[i].onmouseout = function(){
				startMove (this,200);
			}
		}
	}
    var timer = null;
    function startMove(obj,iTarget){
    	clearInterval(obj.timer);
    	obj.timer = setInterval(function(){
    		var speed = (iTarget - obj.offsetWidth)/8;
    		speed = speed >0?Math.ceil(speed):Math.floor(speed);
    		if (obj.offsetWidth == iTarget) {
    			clearInterval(obj.timer);
    		}
    		else {
    			obj.style.width = obj.offsetWidth + speed + "px";}
    	},30)
    }
</script>
</head>
<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
</body>
</html>