进度条效果

<!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>

 

posted on 2018-04-14 17:23  王建润  阅读(77)  评论(0编辑  收藏  举报