滑动条slide的js实现

最新推荐文章于 2025-04-17 14:03:50 发布

呼啦_

最新推荐文章于 2025-04-17 14:03:50 发布

阅读量863

点赞数 1

分类专栏： JavaScript 文章标签： javascript css html html5 css3

本文链接：https://blog.youkuaiyun.com/weixin_44217882/article/details/116425452

版权

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

实现效果图：
在这里插入图片描述
*利用localStorage在本地存储滑块位置

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>

        <style>
            #slide{position: relative; width: 600px; height: 30px; border: 1px solid black; margin: 100px auto}
            #block{width: 30px; height: 30px; background-color: blue; position: absolute; left: 0px}
            #full{width: 0px; height: 30px; background-color: orange; position: absolute; top: 0px; left: 0px}
        </style>

        <script>
            window.onload = function(){
                var oSlide = document.getElementById("slide");
                var oFull = document.getElementById("full");
                var oBlock = document.getElementById("block");

                //重新获取是否存储滑动的位置
                if(!window.localStorage){
                     alert("该浏览器不支持localStorage")
                }else{
                    //取出本地存储中的值
                    var l = localStorage.getItem("slide") ? localStorage.getItem
                    ("slide") : 0;
                    oBlock.style.left = l + 'px';
                    //填充部分跟随滑块进行填充
                    oFull.style.width = l + 'px';
                }

                oBlock.onmousedown = function(ev){
                    var e = ev || window.event;
                    var offsetX = e.clientX - oBlock.offsetLeft;

                    document.onmousemove = function(ev){
                        var e = ev || window.event;
                        var l = e.clientX - offsetX;
                        if(l <= 0){
                            l = 0;
                        }
                        if(l >= 570){
                            l = 570;
                        }
                        
                        oBlock.style.left = l + 'px';
                        //填充部分跟随滑块进行填充
                        oFull.style.width = l + 'px';
                        //对当前滑块的位置，进行本地存储
                        if(!window.localStorage){
                            alert("该浏览器不支持localStorage")
                        }else{
                            localStorage.setItem("slide", l);
                        }
                    }
                }
                document.onmouseup = function(){
                    document.onmousemove = null;
                }

            }
        </script>
    </head>

    

    <body>
        <div id="slide">
            <div id="full"></div>
            <div id="block"></div>
        </div>
    </body>
</html>