多物体运动

花开富贵城

于 2018-07-11 20:49:20 发布

阅读量194

点赞数 1

分类专栏：运动

本文链接：https://blog.youkuaiyun.com/qq_42498352/article/details/81006674

版权

运动专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用纯CSS设置元素样式并结合JavaScript实现动态调整元素宽度的例子。通过简单的HTML结构，定义了不同颜色的块状元素，并利用JavaScript监听鼠标悬停与移出事件来改变这些元素的宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#b1,#b2,#b3{
			width: 100px;
			height: 100px;
			background: pink;
		}
		#b2{
			background: deeppink;
			margin: 10px 0;
		}
	</style>
	<body>
		<div id="b1"></div>
		<div id="b2"></div>
		<div id="b3"></div>
	</body>
</html>
<script type="text/javascript">
	//鼠标移动到某个div上  该div的宽度变成300    离开该div
	var divs = document.querySelectorAll('div');
	for (var i = 0; i < divs.length; i++) {
		divs[i].onmouseover = function(){
			animate(this,300);
		}
		divs[i].onmouseout = function(){
			animate(this,100);
		}
	}
	
	function animate(obj,target){
		clearInterval(obj.timer);
		obj.timer = setInterval(function(){
			var speed = (target - obj.offsetWidth)/10;
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
			if(obj.offsetWidth == target){
				clearInterval(obj.timer);
			}else{
				obj.style.width = obj.offsetWidth + speed + 'px';
			}
		},30)
	}
</script>