4.8 加载条和滑动效果 

<style type="text/css">
        *{
		margin:0px auto;}
	#kuang{
				
		      height:50px;
		      border:1px solid #000}
	#yanse{
				
			height:50px;
			background-color:red;
			float:left;}
        </style>
 </head>
    
 <body>
    <div id="kuang" style="width:400px;">         内联，不然下边获取不到宽度
        	<div id="yanse" style="width:0px;"></div>
    </div>
 </body>
 <script type="text/javascript">
        window.setTimeout("Zou()",20);        间隔
		
	function Zou()
	{
		var y = document.getElementById("yanse");
		var k = document.getElementById("kuang");
		var w = y.style.width;	     定义颜色的宽
		var kw = k.style.width;         定义框的宽
		var wc = parseInt(w);            整形取整
		var kc = parseInt(kw);
		  
	var wc = parseInt(w.substr(0,w.length-2));  不用整形的时候可以用这个，
字符串需要转整形  substr截取字串 ， 0是初始位置开始截，总长度-px就是总长度-2
		if(wc<400)                            判断颜色的宽度小于颜色的宽度一直+2
		{
			wc =wc+2;
			y.style.width = wc+"px";
                       
				
			window.setTimeout("Zou()",20);	  自己调自己
		}
			
			
			
		}
    </script>

滑动效果：

点击黑色按钮让红色滑动，到和红色一样的宽度

 <style type="text/css">
        #kuang{
			width:800px;
			height:300px;
			}
		#zuo{		
			height:300px;
			background-color:red;
			float:left;}
		#you{		
			height:300px;
			background-color:blue;
			float:left;}
		#an{
			width:50px;
			height:50px;
			background-color:#000;
			position:absolute;              绝对定位
			top:125px;				
			}
        </style>
  </head>
    
  <body>
    <div id="kuang">
        <div id="zuo" style="width:200px;"></div>
           <div id="you" style="width:600px;"></div>
       </div>
       <div id="an" onclick="Zou()" style="left:180px;"></div>
   </body>
    <script type="text/javascript">
		var id;       最外边定义的变量，两个都可以使用
   	function Zou()
		{
			执行间隔语句	
			id = window.setInterval("Jin()",20);       id=，下边清间隔
		}
		
		调起的函数
		function Jin()
		{
			改变红色的宽度
			var zuo = document.getElementById("zuo");
			var zw = zuo.style.width;	
			截取字符串
			var zc = parseInt(zw.substr(0,zw.length-2));
			if(zc>=600)
			{
				window.clearInterval(id);	         清间隔，因为判断条件太多
				return;  跳出函数                     所以直接清，条件满足时，下边
			}                                                       的就不走了
			zc = zc+2;
			zuo.style.width = zc+"px";
			
			蓝色的宽度
			var you = document.getElementById("you");
			var yw = you.style.width;
			var yc = parseInt(yw.substr(0,yw.length-2));
			yc = yc-2;
			you.style.width = yc+"px";
			
			黑色的位置
			var an = document.getElementById("an");
			var al = an.style.left;
			var ac = parseInt(al.substr(0,al.length-2));
			ac = ac+2;
			an.style.left = ac+"px";
		}
    </script>

　　

　

posted on 2018-04-08 16:48  sunyexiang  阅读(128)  评论(0)    收藏  举报

导航