标签：border com col doc 技术 fun position element var
进度条 <div id="tiao" style="width:500px; height:30px; border:1px solid #333;">
<div id="jindu" style="width:0px; height:30px; background-color:#00F;">0%</div>
js部分 window.setTimeout("tiao()",20) function tiao() { var y = document.getElementById("tiao"); var z = document.getElementById("jindu"); var l = y.style.width; var i = z.style.width; var m = parseInt(l.substr(0,l.length-2)); var n = parseInt(i.substr(0,l.length-2)); if(n<m) { n = n+2; jindu.style.width = n+"px"; window.setTimeout("tiao()",20) } } 获取两个div的宽，让第二个用间隔或延迟递加到等于第一个的宽 获取属性截取字符串取整 比较
<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()" ondblclick="hui()" style="left:180px;"></div> </body> <script type="text/javascript"> var id; function Zou() { //执行间隔语句 id = window.setInterval("Jin()",20); } //调起的函数 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"; }
点击黑色红色向右扩大 ， 蓝色向右缩小， 图片的一种效果
标签：border com col doc 技术 fun position element var
原文地址：https://www.cnblogs.com/o728/p/8745942.html
