JQ使div动态拉伸,width

Posted chaojimali

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQ使div动态拉伸,width相关的知识,希望对你有一定的参考价值。

<!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的主要内容,如果未能解决你的问题,请参考以下文章

DIV固定宽度和动态拉伸混合水平排列

使DIV 100%在另一个DIV 100%高度内拉伸高度[重复]

手机站使图片高度统一jq代码

覆盖 <div> 内联宽度样式以使元素拉伸到内​​容?

如果有margin-top,则将div的高度拉伸到页面末尾

如何用CSS使图片自适应显示宽度