js控制div样式

原创 2018-11-10 02:48:03 10
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>js控制div样式</title>
		<style type="text/css">
			
			body{margin: 0px;padding: 0px;}
			
			.box{
				width:200px;
				height: 100px;
				background:pink;
				color:#999;
			}
			
		</style>
	</head>
	<body>
		<h1>点击下面元素有惊喜</h1>
		<div id="Ibox" class="box" onclick="MyOdiv(this)" >大家好!我是纸飞机的梦想多么渺小!期待与大家一起共同进步!</div>
		
		<script>
			//速度值 ,原始的div宽度值 需要改变的宽度值,计时器 ,div对象
			var speed = 5 , width = 200 , MaxWidth = 500 , jishiqi , Odiv 
			var number = (MaxWidth - width)/speed;
			var cishu = 1;
			// div的点击函数
			function MyOdiv(Odiv){
				console.log(jishiqi)
				if(!jishiqi){
					jishiqi = setInterval(Anite,50)
					
				}else{
					return ;
				}
				
			}
			
			//动画函数
			function Anite(){
				if(!Odiv){
					Odiv = document.getElementById('Ibox')
				}
				
				if(number==0 ){
					clearInterval(jishiqi)
					//还原
					setTimeout(chongZhi,2000)
					return ;
				}
				
				Odiv.style.width = width + cishu*speed + "px"
				number--;
				cishu ++;
			}
			
			//重置函数
			function chongZhi(){
				if(!Odiv){
					Odiv = document.getElementById('Ibox')
				}
				
				Odiv.style.width = width + "px"
				number = (MaxWidth - width)/speed;
				jishiqi = null;
				cishu = 1;
			}
			
		</script>
	</body>
</html>


批改老师:韦小宝批改时间:2018-11-10 09:29:16
老师总结:写的很不错哦!下次记得加点自己的总结进去哦!以保以后看到不会迷糊!加油吧!

发布手记

热门词条