码迷,mamicode.com
首页 > 其他好文 > 详细

JQ使div动态拉伸,width

时间:2018-07-23 12:40:48      阅读:1222      评论:0      收藏:0      [点我收藏+]

标签:yellow   rip   tar   add   charset   abs   turn   function   点击   

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src =js/jquery-3.1.1.min.js></script>
    <title>
        RunJS 演示代码
    </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            position: absolute;
            float: left;
            height: 500px;
        }
        div.left {
            background-color: red;
            width: 200px;
            left:0px;
        }
        div.center {
            background-color: yellow;
            width: 200px;
            right:205px;
            float:right;
        }
        div.handler {
            width: 5px;
            cursor: col-resize;
            background-color: blue;
            z-index:1;
            left: 200px;
        }
    </style>
    <script>
        jQuery(function ($){
            var doc = $(document), dl = $("div.left"), dc = $("div.center");
            var sum = dl.width() + dc.width() +
                $("div.handler").mousedown (function (e) {
                    var me = $(this);
                    var deltaX = e.clientX
                        -
                        (parseFloat(me.css("left")) || parseFloat(me.prop("clientLeft")));
                    doc.mousemove(function (e){
                        var lt = e.clientX - deltaX;
                        lt = lt < 0 ? 0 : lt;
                        lt = lt > sum - me.width() ? sum - me.width() : lt;
                        me.css ("left", lt + "px");
                        dl.width(lt);
                        dc.width(sum-lt-me.width());
                    });
                }).width();

            doc.mouseup (function(){
                doc.unbind("mousemove");
            });
            doc[0].ondragstart
                = doc[0].onselectstart
                = function ()
            {
                return false;
            };
        });
    </script>
</head>
<body>
<div class="left">
    同时在线人数:1000
    点击刷新
</div>
<div class="handler">
</div>
<div class="center">
    sss
</div>
</body>
</html>

 

JQ使div动态拉伸,width

标签:yellow   rip   tar   add   charset   abs   turn   function   点击   

原文地址:https://www.cnblogs.com/chaojimali/p/9353610.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!