美文网首页
8.4 进度条(水平)

8.4 进度条(水平)

作者: 康轩 | 来源:发表于2017-05-30 21:51 被阅读0次

    <script>
    window.onload = function (){
    var box1 = document.getElementById('box1')
    var box = box1.children[0];
    var cunt = box1.children[1];
    var oSpan = box.children[0];
    var star = box.children[1];
    // 当span被点击的时候发生的变化
    oSpan.onmousedown = function (event) {
    var event = event || window.event;
    // 被点击的时候获取该点到左边线的距离disatex
    var disateX = event.clientX - oSpan.offsetLeft;
    document.onmousemove = function (event) {
    var event = event || window.event;
    var starWidth = event.clientX - disateX;
    var bigWidth = box.offsetWidth - oSpan.offsetWidth;
    // 判断移动div star 移动的范围
    if (starWidth < 0) {
    starWidth= 0;
    }else if(starWidth >= bigWidth){
    starWidth = bigWidth;
    }
    oSpan.style.left = starWidth + 'px';
    star.style.width = starWidth + 'px';
    cunt.innerHTML = parseInt(starWidth/bigWidth * 100)+ "%";
    }
    document.onmouseup = function () {
    document.onmousemove = null;
    document.onmouseup = null;
    }
    }
    }
    </script>

    方式二 也是可以实现 这里就是mask 的宽 + oSpan 的宽 就=parent; 上面的mask宽为 100%
    <script>
    //我这里用的
    window.onload = function () {
    var box = document.getElementById('box');
    var lf = box.children[0];
    var rg = box.children[1];
    var oSpan = lf.children[0];
    var porgess = lf.children[1];
    //当oSpan 被点击的时候
    oSpan.onmousedown = function (event) {
    // alert(0);
    var event = event ||window.event ;
    //求得 oSpan 被点击的时候 该点到它自己border的距离 = clientX - oSpan它自己的offsetLeft 因为他与它父亲定位了
    var distanceX = event.clientX - oSpan.offsetLeft;
    // var distaceY = event.clientY- oSpan.offsetTop;
    document.onmousemove = function (event) {
    event = event||window.event;
    //求ospan 与它左边的距离 就是 moveDiv 的长度
    var moveDiv = event.clientX -distanceX;
    //判断 边界 就是移动的div 的最宽
    var moveDiv_max = oSpan.offsetParent.offsetWidth - oSpan.offsetWidth;
    if ( moveDiv <0) {
    moveDiv = 0;
    }else if( moveDiv >= moveDiv_max){
    moveDiv = moveDiv_max;
    }
    oSpan.style.left = moveDiv + 'px';
    porgess.style.width = moveDiv + 'px';
    // 求出比例 就是 滚动的进度条的宽/它父亲的宽
    rg.innerHTML = parseInt(porgess.offsetWidth/(oSpan.offsetParent.offsetWidth- oSpan.offsetWidth)*100)+ '%';
    }
    //清除鼠标抬起事件
    document.onmouseup = function () {
    document.onmousemove = null;
    document.onmouseup= null;
    }
    }
    }
    </script>

    相关文章

      网友评论

          本文标题:8.4 进度条(水平)

          本文链接:https://www.haomeiwen.com/subject/kgzrfxtx.html