【JavaScript】滑动条slide

最新推荐文章于 2023-04-28 15:34:45 发布

Acrgi

最新推荐文章于 2023-04-28 15:34:45 发布

阅读量304

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Acrgi/article/details/129455236

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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: aqua;
            position: absolute;
            left: 100px;
        }
        #full{
            width: 100px;
            height: 30px;
            background-color: brown;
            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;
                    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>