例题进度条效果点击图片滑动效果。

Posted 2020-10-31 r6688

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了例题进度条效果点击图片滑动效果。相关的知识，希望对你有一定的参考价值。

进度条效果

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

以上是关于例题进度条效果点击图片滑动效果。的主要内容，如果未能解决你的问题，请参考以下文章

用jquery实现进度条效果

androidprogressbar横向进度条动画效果

Android仿IOS ViewPager滑动进度条

jquery 进度条，根据指定的值在进度条中显示。各位有没有例子或相关例子。如下图:想要动态的

串口屏开发之滑块控件的使用总结——如何通过滑动滑块实现进度条和文本的联动效果

例题 进度条效果点击图片滑动效果。

进度条效果

点击图片滑动

例题进度条效果点击图片滑动效果。