纯JS、CSS模拟可上拉下拉的组件框

Poulyield

已于 2025-03-22 18:07:26 修改

阅读量341

点赞数 1

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

于 2021-04-18 17:25:32 首次发布

本文链接：https://blog.youkuaiyun.com/ksws0319440/article/details/115835357

版权

JavaScript 同时被 2 个专栏收录

4 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

效果图如下(有个鼠标点着灰色条拖动它的哈)：

效果图

接下来look look你们期盼的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{

            overflow: hidden;
        }
        .moveBar{
            width: 300px;
            height: 15px;
            background-color: #aaa;
            cursor: move;
        }
        .block{
            width: 500px;
            height: 350px;
            font-size: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0062CC;
        }
        .box{
            width: 300px;
            height: 300px;
            font-size: 28px;
            background-color: aquamarine;
            position:relative;
        }
    </style>
    <script>
        var store = {

            ifDrag : false
        }
        function onStartDrag(e) {

            let event = window.event || arguments.callee.caller.arguments[0];
            store.ifDrag = true;
            store.startPos = event.pageY;
            document.body.style.userSelect = "none";    
        }
        function onDrag(e) {

            if (store.ifDrag) {
                let box = document.getElementById('box');
                let event = window.event || arguments.callee.caller.arguments[0];
                let top = box.style.top;
                box.style.top = (top.substr(0, top.length-2) - (store.startPos - event.pageY)) + "px";
                store.startPos = event.pageY;
            }
        }
        function onEndDrag(){

            if (store.ifDrag) document.body.style.userSelect = "text";
            store.ifDrag = false;
        }
    </script>
</head>
<body οnmοusemοve="onDrag()" οnmοuseup="onEndDrag()">
    <div class="block">阻挡块</div>
    <div id="box" class="box">
        <div class="moveBar" οnmοusedοwn="onStartDrag();"
        οnmοuseup="onEndDrag()"></div>
        <div align="center" style="margin-top: 120px">可上拉和下拉的框</div>
    </div>
</body>


</html>