js实现拖动改变层的大小（宽度）

最新推荐文章于 2023-08-29 15:11:29 发布

della_uii

最新推荐文章于 2023-08-29 15:11:29 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript 文章标签：鼠标拖动

本文链接：https://blog.csdn.net/Della_UI/article/details/53026345

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

鼠标拖动改变div的宽度变化：

<body>
    <div id="div1" style="width: 100px; height: 100px; background: #CCCCCC; position: absolute; left: 500px; top: 200px;">
        <div style="width: 10px; height: 100px; background: #DAA520; position: absolute; left: 0; cursor: move;"></div>
        <div style="width: 10px; height: 100px; background: #DAA520; position: absolute; right: 0; cursor: move;"></div>
    </div>

    <script type="text/javascript">
        var oDiv=document.getElementById("div1");

        oDiv.onmousedown=function(ev){
            var ev= ev || event;
            var b='';

            var disL=oDiv.offsetLeft;
            var disW=oDiv.offsetWidth;
            var disX=ev.clientX;

            if ( disX > disL + disW - 10) {
                b='right';
            }else if ( disX < disL + 10 ) {
                b='left';
            }

            if (oDiv.setCapture) {
                oDiv.setCapture();
            }

            document.onmousemove=function(ev){
                var ev = ev || event;

                switch (b){
                    case 'left':
                        oDiv.style.width= disW - ( ev.clientX - disX ) + 'px';
                        oDiv.style.left= disL + ( ev.clientX - disX ) + 'px';
                        break;
                    case 'right':
                        oDiv.style.width= disW + ( ev.clientX - disX ) + 'px';
                        break;
                }
            }

            document.onmouseup=function(){
                document.onmousemove=document.onmouseup=null;

                if (oDiv.releaseCapture) {
                    oDiv.releaseCapture();
                }
            }

            return false;
        }
    </script>
</body>

della_uii

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现拖动改变层的大小（宽度）

鼠标拖动改变div的宽度变化：<body> <div id="div1" style="width: 100px; height: 100px; background: #CCCCCC; position: absolute; left: 500px; top: 200px;"> <div style="width: 10px; height: 100px; backgrou
复制链接

扫一扫

专栏目录