水平两列宽度自动拖拽伸缩实现

代码如下：（自主引入jQuery）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>左右区域自动拖拽伸缩</title>
    <script src="lib/jquery-1.12.1.min.js" type="text/javascript"></script>
</head>
<style>
    body,ul{margin: 0;padding: 0;position: absolute;top: 0;right: 0;bottom: 0;left: 0}
    .container{color: #fff;text-align: center; height: 100%;font-size: 40px;}
    /*清除浮动*/
    .container:after{content: '';display: block;height: 0;clear: both;}
    .left{float: left;width: 240px;height: 100%;background-color: #e7ba6f;}
    .center{float: left;width: 4px; height:100%;background-color: #e7001d;cursor: ew-resize}
    .right{margin-left: 240px;height: 100%;background-color: #b6ecff;}
</style>
<body>
<div class="container">
    <div class="left">
        左边区域
    </div>
    <div class="center"></div>
    <div class="right">
        右边区域
    </div>
</div>
<script>
    function dragBox(left,center,right){
        center.off('mousedown').on("mousedown", function (e) {
            e = e||window.event;
            e.preventDefault();
            var me = left,x = e.clientX - me.width();
            $(document).on("mousemove", mouseMove).on("mouseup", mouseUp);
            //移动事件
            function mouseMove(e) {
                e = e||window.event;
                left.css('width',e.clientX - x);
                right.css('margin-left',e.clientX - x);
            }
            //停止事件
            function mouseUp() {
                //卸载事件
                $(document).off("mousemove", mouseMove).off("mouseup", mouseUp);
            }
        });
    }
    var left = $('.left');
    var center = $('.center');
    var right = $('.right');
    dragBox(left,center,right);
</script>
</body>
</html>

 

效果如下图所示：

鼠标放在中间红色线区域，点击可以左右拖动控制左右两边区域宽度。

posted @ 2016-03-24 19:16  minimal虾米  阅读(222)  评论(0)  编辑  收藏  举报