进度条效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
margin:0px auto;}
#kuang{
height:50px;
border:1px solid #000}
#yanse{
height:50px;
background-color:blue;
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.substr(0,w.length-2));
if(wc<400)
{
wc =wc+2;
y.style.width = wc+"px";
window.setTimeout("Zou()",20);
}
}
</script>
</html>
点击图片滑动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<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);
}
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>
</html>
