js实现固定滑动效果 

<!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>
<style type="text/css">
*{margin:0px auto; padding:0px;}
#wai{width:1000px; height:500px; margin-top:50px;}
#zuobian{ height:500px; background-color:#C66; float:left}
#youbian{ height:500px; background-color:#F99; float:left;}
#anniu{width:50px; height:50px; background-color:#3F3; position:relative; margin-left:0px; top:225px; }

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div id="wai">
<div id="zuobian" style="width:200px;"></div>
<div id="youbian" style="width:800px;"></div>
<div id="anniu" style="left:175px;"></div>
</div>
</body>
<script type="text/javascript">
var anniu = document.getElementById("anniu");
var ids;
anniu.onclick=function(){
    ids = window.setInterval("yidong()",5);
    }
    function yidong(){
        var zuobian = document.getElementById("zuobian");
        var youbian = document.getElementById( "youbian");
        var anniu = document.getElementById( "anniu");
        var zb = parseInt (zuobian.style.width);
        var yb = parseInt (youbian.style.width);
        var an = parseInt (anniu.style.left);
        if(zb<800){
            zb++;
            yb--;
            an++;
            }else{
                window.clearInterval(ids);
                }
        
        zuobian.style.width = zb+"px";
        youbian.style.width = yb+"px";
        anniu.style.left = an+"px";
        }
</script>
</html>

 

posted @ 2018-04-20 15:27  palpitate  阅读(418)  评论(0)    收藏  举报