让3个DIV同时变宽

最新推荐文章于 2024-09-15 21:53:26 发布

bailei1929

最新推荐文章于 2024-09-15 21:53:26 发布

阅读量94

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/web168/p/4791635.html

版权

<style>
div {width:100px; height:50px; background:green; margin:20px; }
</style>
<script>
window.οnlοad=function()
{
	//申明变量adiv并让它获取到所有DIV的对象;
	var aDiv=document.getElementsByTagName('div');
	
　　　　　　//做一个循环(申明一个变量i=0;循环的次数要小于变量adiv的最大数;循环一次增加1)
	for(var i=0; i<aDiv.length; i=i+1)
	{
　　　　　　　　　　　//给没个DIV都设置一个定时器并赋值为空;
		aDiv[i].timer=null;
　　　　　　　　　　　//给每个DIV都创建一个鼠标移入的事件函数
		aDiv[i].οnmοuseοver=function()
		{
　　　　
			move(this,400)	//函数move(当前元素,到400像素的位置;)
		}
		aDiv[i].οnmοuseοut=function()
		{
			move(this,100)　　	//函数move(当前元素,到400像素的位置;)
		}	
	}	
}
function move(obj,iTarget)  //设置函数move并传递2个参数(obj,iTarget);
{
	clearInterval(obj.timer);    //清楚每个当前元素的定时器
	obj.timer=setInterval(function(){                       //为每个定时器都创建一个函数并且每30毫秒运行一次;
		var speed=(iTarget-obj.offsetWidth)/10   
		speed=speed>0?Math.ceil(speed):Math.floor(speed);//类似if(speed>0){speed=math.ceil(speed)}else{speed=math.floor(speed)}		if(obj.offsetWidth==iTarget)
　　                 if(obj.offsetWidth==iTarget)  //假如当前元素的宽带等于目标距离

		{

			clearInterval(obj.timer)   //清楚当前元素的定时器	
		}
		else
		{
			obj.style.width=obj.offsetWidth+speed+'px';//当前元素的宽带=前端元素宽带+速度+px;	
		}
		},30)
}
</script>

</head>

<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

转载于:https://www.cnblogs.com/web168/p/4791635.html