滑动效果

滑动效果：

<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; padding:0px;}
#wai{ width:1000px; height:500px; margin-top:30px;}
#left{ height:500px; background-color:#F00; float:left}
#right{height:500px; background-color:#0F0; float:left}
#btn{ width:50px; height:50px; background-color:#00F; position:relative; margin-left:0px; top:225px; }
</style>
</head>

<body>

<div id="wai">
    <div id="left" style="width:200px;"></div>
    <div id="right" style=" width:800px; "></div>
    <div id="btn" style="left:175px;"></div>
</div>

</body>
</html>
<script type="text/javascript">
var btn = document.getElementById("btn");
var st;
btn.onclick = function()
{
    st = window.setInterval("jia()",10)
    
    }
function jia()
{
    var left = document.getElementById("left");
    var right = document.getElementById("right");
    var btn = document.getElementById("btn");
    var rwidth = parseInt(right.style.width);
    var lwidth = parseInt(left.style.width);
    var lbtn = parseInt(btn.style.left);
    if(lwidth<1000){
        lwidth++;
        rwidth--;
        lbtn++;
        btn.style.left=lbtn+"px";
        left.style.width=lwidth+"px";
        right.style.width=rwidth+"px";
        }else{ window.clearInterval(st);}
    }
</script>

效果图：

 

posted @ 2017-12-27 14:10  桃花灬仙人  阅读(154)  评论(0)  编辑  收藏  举报