1. 程式人生 > >JQ使div動態拉伸,width

JQ使div動態拉伸,width

func parse 刷新 client ret index margin col pro

<!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