自己动手写拖动滑块

来源：互联网发布：linux dhcp服务安装包编辑：程序博客网时间：2024/05/17 01:09

这里写图片描述

<!DOCTYPE html><html lang="zh-cn">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>鼠标拖动小方块</title>        <style type="text/css">            .lineDiv {                position: absolute;                height: 5px;                font-size: 0;                line-height: 0;                background: red;                width: 500px;                top: 100px;                left: 50%;                margin-left: -250px            }            .lineDiv .minDiv {                position: absolute;                top: -5px;                left: 0;                width: 15px;                height: 15px;                background: green;                cursor: pointer            }        </style>    </head>    <body>        <center>            <h3>用鼠标拖动小方块</h3></center>        <div id="lineDiv" class="lineDiv">            <div id="minDiv" class="minDiv"></div>        </div>        <script>            window.onload = function() {                var lineDiv = document.getElementById('lineDiv'); //长线条                var minDiv = document.getElementById('minDiv'); //小方块                var ifBool = false; //判断鼠标是否按下                //鼠标按下方块                minDiv.onmousedown = function(e) {                    e.stopPropagation();                    ifBool = true;                };                //拖动                window.onmousemove = function(e) {                    e.stopPropagation();                    if (ifBool) {                        var x = e.clientX; //鼠标横坐标var x                        var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标                        var minDiv_left = (x - lineDiv_left) - 5; //小方块相对于父元素（长线条）的left值var minDiv_left                        if (minDiv_left > lineDiv.offsetWidth - 5) {                            minDiv_left = lineDiv.offsetWidth - 5;                        }                        if (minDiv_left < 0) {                            minDiv_left = 0;                        }                        //设置拖动后小方块的left值                        minDiv.style.left = minDiv_left + "px";                    }                };                //鼠标松开                window.onmouseup = function(e) {                    ifBool = false;                };                //获取元素的绝对位置                function getPosition(node) {                    var left = node.offsetLeft; //获取元素相对于其父元素的left值var left                    var top = node.offsetTop;                    current = node.offsetParent; // 取得元素的offsetParent                    　 // 一直循环直到根元素                    　　                    while (current != null) {　　                        left += current.offsetLeft;　　                        top += current.offsetTop;　　                        current = current.offsetParent;　　                    }                    return {                        "left": left,                        "top": top                    };                }            }        </script>    </body></html>

这里写图片描述

<!DOCTYPE html><html lang="zh-cn">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />        <title>鼠标拖动小方块</title>        <style type="text/css">            .lineDiv {                position: relative;                height: 5px;                background: red;                width: 300px;                margin: 50px auto;            }            .lineDiv .minDiv {                position: absolute;                top: -5px;                left: 0;                width: 15px;                height: 15px;                background: green;                cursor: pointer            }            .lineDiv .minDiv .vals {                position: absolute;                font-size: 20px;                top: -45px;                left: -10px;                width: 35px;                height: 35px;                line-height: 35px;                text-align: center;                background: blue;            }            .lineDiv .minDiv .vals:after {                content: "";                width: 0px;                height: 0px;                border-top: 6px solid blue;                border-left: 6px solid transparent;                border-right: 6px solid transparent;                border-bottom: 6px solid transparent;                display: block;                margin-left: 11px;            }        </style>    </head>    <body>        <center>            <h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>        </center>        <div id="lineDiv" class="lineDiv">            <div id="minDiv" class="minDiv">                <div id="vals" class="vals">0</div>            </div>        </div>        <script>            window.onload = function() {                var lineDiv = document.getElementById('lineDiv'); //长线条                var minDiv = document.getElementById('minDiv'); //小方块                var msg = document.getElementById("msg");                var vals = document.getElementById("vals");                var ifBool = false; //判断鼠标是否按下                //鼠标按下方块                minDiv.addEventListener("touchstart", function(e) {                    e.stopPropagation();                    ifBool = true;                    console.log("鼠标按下")                });                //拖动                window.addEventListener("touchmove", function(e) {                    console.log("鼠标拖动")                    if(ifBool) {                        var x = e.touches[0].pageX || e.touches[0].clientX; //鼠标横坐标var x                        var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标                        var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值                         if(minDiv_left >= lineDiv.offsetWidth - 15) {                            minDiv_left = lineDiv.offsetWidth - 15;                        }                        if(minDiv_left < 0) {                            minDiv_left = 0;                        }                        //设置拖动后小方块的left值                        minDiv.style.left = minDiv_left + "px";                        msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);                        vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);                    }                });                //鼠标松开                window.addEventListener("touchend", function(e) {                    console.log("鼠标弹起")                    ifBool = false;                });                //获取元素的绝对位置                function getPosition(node) {                    var left = node.offsetLeft; //获取元素相对于其父元素的left值var left                    var top = node.offsetTop;                    current = node.offsetParent; // 取得元素的offsetParent                    　 // 一直循环直到根元素                    　　                    while(current != null) {　　                        left += current.offsetLeft;　　                        top += current.offsetTop;　　                        current = current.offsetParent;　　                    }                    return {                        "left": left,                        "top": top                    };                }            }        </script>    </body></html>

兼容PC端和移动端

<!DOCTYPE html><html lang="zh-cn">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />        <title>鼠标拖动小方块</title>        <style type="text/css">            .lineDiv {                position: relative;                height: 5px;                background: red;                width: 300px;                margin: 50px auto;            }            .lineDiv .minDiv {                position: absolute;                top: -5px;                left: 0;                width: 15px;                height: 15px;                background: green;                cursor: pointer            }            .lineDiv .minDiv .vals {                position: absolute;                font-size: 20px;                top: -45px;                left: -10px;                width: 35px;                height: 35px;                line-height: 35px;                text-align: center;                background: blue;            }            .lineDiv .minDiv .vals:after {                content: "";                width: 0px;                height: 0px;                border-top: 6px solid blue;                border-left: 6px solid transparent;                border-right: 6px solid transparent;                border-bottom: 6px solid transparent;                display: block;                margin-left: 11px;            }        </style>    </head>    <body>        <center>            <h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>        </center>        <div id="lineDiv" class="lineDiv">            <div id="minDiv" class="minDiv">                <div id="vals" class="vals">0</div>            </div>        </div>        <script>            window.onload = function() {                var lineDiv = document.getElementById('lineDiv'); //长线条                var minDiv = document.getElementById('minDiv'); //小方块                var msg = document.getElementById("msg");                var vals = document.getElementById("vals");                var ifBool = false; //判断鼠标是否按下                //事件                var start = function(e) {                    e.stopPropagation();                    ifBool = true;                    console.log("鼠标按下")                }                var move = function(e) {                    console.log("鼠标拖动")                    if(ifBool) {                        if(!e.touches) {    //兼容移动端                            var x = e.clientX;                        } else {     //兼容PC端                            var x = e.touches[0].pageX;                        }                        //var x = e.touches[0].pageX || e.clientX; //鼠标横坐标var x                        var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标                        var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值                         if(minDiv_left >= lineDiv.offsetWidth - 15) {                            minDiv_left = lineDiv.offsetWidth - 15;                        }                        if(minDiv_left < 0) {                            minDiv_left = 0;                        }                        //设置拖动后小方块的left值                        minDiv.style.left = minDiv_left + "px";                        msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);                        vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);                    }                }                var end = function(e) {                        console.log("鼠标弹起")                        ifBool = false;                    }                    //鼠标按下方块                minDiv.addEventListener("touchstart", start);                minDiv.addEventListener("mousedown", start);                //拖动                window.addEventListener("touchmove", move);                window.addEventListener("mousemove", move);                //鼠标松开                window.addEventListener("touchend", end);                window.addEventListener("mouseup", end);                //获取元素的绝对位置                function getPosition(node) {                    var left = node.offsetLeft; //获取元素相对于其父元素的left值var left                    var top = node.offsetTop;                    current = node.offsetParent; // 取得元素的offsetParent                    　 // 一直循环直到根元素                    　　                    while(current != null) {　　                        left += current.offsetLeft;　　                        top += current.offsetTop;　　                        current = current.offsetParent;　　                    }                    return {                        "left": left,                        "top": top                    };                }            }        </script>    </body></html>

0 0