您正在使用IPV4(3.235.184.215)访问本站 您本次共访问本站 1 次
用户名: 用QQ登录本站
密 码:
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 端午节 0
2021年 建党节 17
2022年 元 旦 201
2022年 春 节 232
 
  • 您现在的位置:首页 >> JS >> 内容

    JavaScript实现可拖拽的进度条

    内容摘要: htmlhead meta http-equiv='X-UA-Compatible' content='IE=edge' meta name='viewport' content='width=device-width, initial-scale=1' meta charset='UTF-8'title可拖拽进度条/titlestylebody{margi......

      <html>

    <head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta charset="UTF-8">

    <title>可拖拽进度条</title>

    <style>

    body{

    margin:50px; ;

    }


    .box {

    width:49%;

    hegiht:3rem;

    line-height:3rem;

    float:left;

    }

    .boxDesc {

    width:50%;

    hegiht:3rem;

    line-height:0.3rem;

    float:left;

    }


    .scale span{

    background:url(scroll.gif) no-repeat;

    width:8px;

    height:16px;

    position:absolute;

    left:-2px;

    top:-5px;

    cursor:pointer;

    }

    .scale{ background-repeat: repeat-x; background-position: 0 100%; background-color: #E4E4E4; border-left: 1px #83BBD9 solid; width: 100%; height: 10px; position: relative; font-size: 0px; border-radius: 3px; }

    .scale div{ background-repeat: repeat-x; background-color: green; position: absolute; height: 10px; left: 0; bottom: 0; }

    li{

    font-size:12px;

    line-height:50px;

    position:relative;

    height:50px;

    list-style:none;

    }

    </style>

    </head>

    <body>

    <ul style='width:100%;margin-top:15rem;'>

    <li>

    <div class = 'box'>

    <div class="scale" id="bar">

    <div></div>

    <span id="btn"></span>

    </div>

    </div>

    <div class='boxDesc'>

    <span id="title">0</span>

    </div>

    </li>


    </ul>

    </body>

    <script>

    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.onmousedown=function (e){

    var x=(e||b.event).clientX;

    var l=this.offsetLeft;

    var max=f.bar.offsetWidth-this.offsetWidth;

    g.onmousemove=function (e){

    var thisX=(e||b.event).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.onmouseup=new Function('this.οnmοusemοve=null');

    };

    },

    ondrag:function (pos,x){

    this.step.style.width=Math.max(0,x)+'px';

    this.title.innerHTML=pos+'%';

    }

    }

    new scale('btn','bar','title');

    </script>

    </html>

    手机扫描二维码可直达本页
      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2021/5/17 发布时间:15:05:22 点击:304 录入:齐天大圣
  • 上一篇:JavaScript实现长图滚动效果
  • 下一篇:js+cavans实现图片滑块验证
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V5.35 Build 21.06.10(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021