水平进度条拖拽效果

最新推荐文章于 2024-05-29 00:13:10 发布

秋天1014童话

最新推荐文章于 2024-05-29 00:13:10 发布

阅读量3.1k

点赞数 1

分类专栏： web前端 javaScript

本文链接：https://blog.csdn.net/u013217071/article/details/53561238

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

水平滚动条拖拽效果 bar.onmousedown+document.onmousemove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            margin:100px;
            width: 500px;
            height: 5px;
            background: #ccc;
            position: relative;
        }
        .bar{
            width: 10px;
            height: 20px;
            background: #369;
            position: absolute;
            top: -7px;
            left: 0;
            cursor: pointer;
        }
        .mask{
            position: absolute;
            left: 0;
            top: 0;
            background: #369;
            width: 0;
            height: 5px;
        }
    </style>    
</head>
<body>
    <div class="scroll" id="scroll">
        <div class="bar" id="bar">

        </div>
        <div class="mask" id="mask"></div>
    </div>
    <p></p>
    <script>    
        var scroll = document.getElementById('scroll');
        var bar = document.getElementById('bar');
        var mask = document.getElementById('mask');
        var ptxt = document.getElementsByTagName('p')[0];
        var barleft = 0;
        bar.onmousedown = function(event){
            var event = event || window.event;
            var leftVal = event.clientX - this.offsetLeft;
            var that = this;
             // 拖动一定写到 down 里面才可以
            document.onmousemove = function(event){
                var event = event || window.event;
                barleft = event.clientX - leftVal;          
                if(barleft < 0)
                    barleft = 0;
                else if(barleft > scroll.offsetWidth - bar.offsetWidth)
                    barleft = scroll.offsetWidth - bar.offsetWidth;
                mask.style.width = barleft +'px' ;
                that.style.left = barleft + "px";
                ptxt.innerHTML = "已经走了" + parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth) * 100) + "%";

                //防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            }

        }
        document.onmouseup = function(){
            document.onmousemove = null; //弹起鼠标不做任何操作
        }
    </script>
</body>
</html>

这里写图片描述

秋天1014童话

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
水平进度条拖拽效果

水平滚动条拖拽效果 bar.onmousedown+document.onmousemove<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0;
复制链接

扫一扫