js 实现多物体动画效果

最新推荐文章于 2021-08-19 15:39:02 发布

最爱喝橙汁的橙子

最新推荐文章于 2021-08-19 15:39:02 发布

阅读量170

点赞数

分类专栏：前端开发文章标签：前端 h5 js

本文链接：https://blog.csdn.net/qq_43255766/article/details/101196761

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul,li{
				list-style: none;
			}
			ul li{
				width: 200px;
				height: 100px;
				background: yellow;//设置背景颜色
				margin-bottom: 20px;
			}
			
		</style>
		<script>
			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(timer);
				timer=setInterval(function(){
					var speed=(iTarget-obj.offsetWidth)/8;
					speed=speed>0?Math.ceil(speed):Math.floor(speed);
					if(obj.offsetWidth==iTarget){
						clearInterval(timer);
					}
					else{
						obj.style.width=obj.offsetWidth+speed+'px';
					}
				},30)
				
			}
		</script>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>