zoukankan      html  css  js  c++  java
  • 移动端滑动条(原生JS)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>干货-课程-完成</title>
        <style>
        ul.lanren{
            margin:40px auto;
    
        }
        .scale_panel{
            color:#999;
            position:absolute;
            line-height:18px;
            left:60px;top:-0px;
        }
        .scale_panel>span:first-child{
            position: absolute;
            left: -50px;
            font-size: 20px;
        }
        .scale_panel>span:nth-child(2){
            position: absolute;
            right: -50px;
            font-size: 20px;
        }
        .scale>span{
            background-color: red;
            30px;
            height:30px;
            position:absolute;
            left:-2px;top:-15px;
            cursor:pointer;
            border-radius: 50%;
            font-size: 20px;
        }
        .scale{
            background-color: #eee;
            border-left: 1px #83BBD9 solid; 
             430px; 
            height: 10px; 
            position: relative; 
            border-radius: 20px; 
        }
        .scale>div{ 
            background-repeat: repeat-x; 
            background-color: red; /*进度条颜色*/
             0px; 
            position: absolute; 
            height: 10px; 
             0; left: 0; bottom: 0; 
            border-radius: 20px;
        }
        .lanren>li{
            margin-left: 3.50px;
            position:relative;
            list-style:none;
            font-size: 30px;
        }
        #title{
            position: absolute;
            top: 20px;
            left: 30px;
        }
    </style>
    </head>
    <body>
        <!-- 可拖拽进度条 -->
        <ul class="lanren">
            <li><span id="title">0</span>
                <div class="scale_panel">
                    <div class="scale" id="bar">
                        <div></div>
                        <span id="btn"></span>
                    </div>
                </div>
            </li>
        </ul>
        <script src="../lib/zepto.min.js?rev=@@hash"></script>
        <script>
    // 进度条代码
    var scale = function (btn,bar,title){
        this.btn=document.getElementById(btn);
        this.bar=document.getElementById(bar);
        this.title=document.getElementById(title);
        this.step=this.bar.getElementsByTagName("div")[0];
        this.init();
    };
    scale.prototype={
        init:function (){
            var f=this,g=document,b=window,m=Math;
            f.btn.ontouchstart=function (e){
                var x=(e||b.event).touches[0].clientX;
                var l=this.offsetLeft;
                var max=f.bar.offsetWidth-this.offsetWidth;
                g.ontouchmove=function (e){
                    var thisX=(e||b.event).touches[0].clientX;
                    var to=m.min(max,m.max(-2,l+(thisX-x)));
                    f.btn.style.left=to+'px';
                    f.ondrag(m.round(m.max(0,to/max)*100),to);
                    b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
                };
                g.ontouchend=new Function('this.onmousemove=null');
            };
        },
        ondrag:function (pos,x){
            this.step.style.width=Math.max(0,x)+'px';
            this.title.innerHTML=pos+'%';
        }
    }
    new scale('btn','bar','title');
    // });
    </script>
    </body>
    </html>
  • 相关阅读:
    68
    56
    Django manager 命令笔记
    Django 执行 manage 命令方式
    Django 连接 Mysql (8.0.16) 失败
    Python django 安装 mysqlclient 失败
    H.264 SODB RBSP EBSP的区别
    FFmpeg—— Bitstream Filters 作用
    MySQL 远程连接问题 (Windows Server)
    MySQL 笔记
  • 原文地址:https://www.cnblogs.com/dontes/p/8662388.html
Copyright © 2011-2022 走看看