js实现手动滑动条

最新推荐文章于 2024-05-13 09:45:40 发布

我爱吃豆芽呀

最新推荐文章于 2024-05-13 09:45:40 发布

阅读量2w

点赞数 1

分类专栏：前端学习文章标签： js html 滑动条

本文链接：https://blog.csdn.net/woaidouya123/article/details/81677086

版权

前端学习专栏收录该内容

26 篇文章 1 订阅

订阅专栏

效果如下图所示：

滑动效果如下图：

样例页面代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
    #bg_bar {
        margin: 10px;
        height: 80px;
        border-radius: 38px;
        background-color: gray;
        opacity: 0.5;
    }

    #touch_bar {
        position: relative;
        top: -82px;
        border: 2px solid blue;
        width: 15%;
        height: 80px;
        border-radius: 38px;
        background-color: white;
        display: flex;
        flex: row;
        justify-content: center;
        align-items: center;
        z-index: 20;
    }

    #bg_new {
        position: relative;
        top: -164px;
        height: 80px;
        border-radius: 38px;
        background-color: blue;
        z-index: 15;
    }

    #bg_old {
        height: 80px;
        z-index: 10;
        display: flex;
        flex: row;
        justify-content: center;
        align-items: center;
    }
    </style>
</head>

<body>
    <div id="bg_bar">
        <div id="bg_old">
            <span style="font-size: 30px">滑动登录</span>
        </div>
        <div id="touch_bar">
        </div>
        <div id="bg_new"></div>
    </div>
</body>
<script>
var isTouch = false; //标志位，是否点击
var startX = 0; //鼠标点击的偏移量，实现平滑移动的保证
(function() {
    var touch_bar = document.getElementById("touch_bar");
    var bg_bar = document.getElementById("bg_bar");
    var bg_new = document.getElementById("bg_new");
    /* 
    为滑块绑定鼠标移动事件
    当鼠标在滑块上移动时，使滑块在水平方向上跟随移动
    是否移动要根据标志位检测滑块是否被点击
    */
    touch_bar.onmousemove = function(ev) {
        var ev = ev || event;
        // console.log(ev.clientX);
        if (ev.clientX - startX > 0 &&
            ev.clientX - startX < bg_bar.offsetWidth - touch_bar.offsetWidth &&
            isTouch) {
            touch_bar.style.left = ev.clientX - startX + "px";
            bg_new.style.width = ev.clientX - startX + touch_bar.offsetWidth / 2 + "px";
        }
    }
    /*
    设置滑块点击事件,改变标志位，并重置偏移量
    */
    touch_bar.onmousedown = function(ev) {
        isTouch = true;
        startX = event.clientX;
    }
    /*
    设置滑块鼠标点击取消事件,改变标志位，重置偏移量
    */
    touch_bar.onmouseup = function(ev) {
        isTouch = false;
        startX = 0;
        touch_bar.style.left = "0px";
        bg_new.style.width = "0px";
    }
    /*
    设置滑块鼠标移出事件,改变标志位，并重置偏移量
    */
    touch_bar.onmouseout = function(ev) {
        isTouch = false;
        startX = 0;
        touch_bar.style.left = "0px";
        bg_new.style.width = "0px";
    }

    //重置偏移量
    touch_bar.style.left = "0px";
    bg_new.style.width = "0px";
})();
</script>

</html>

我爱吃豆芽呀

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js实现手动滑动条

效果如下图所示：滑动效果如下图：样例页面代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;test&lt;/title&gt; &lt;style&g
复制链接

扫一扫