zoukankan      html  css  js  c++  java
  • 宽度可变的Table

        <script>
            var drag_left = 0;
            var mouse_downX = 0;
            function drag_event_mousedown(e) {
                var e, obj, temp;
                e = window.event ? window.event : e;
                obj = document.getElementById("drag");
    
                drag_left = obj.offsetLeft;
                mouse_downX = e.clientX;
                document.onmousemove = document_event_mousemove;
                temp = document.attachEvent ? document.attachEvent("onmouseup", document_event_mouseup) : document.addEventListener("mouseup", document_event_mouseup, "");
            }
    
            function document_event_mousemove(e) {
                var e, obj;
                e = window.event ? window.event : e;
                obj = document.getElementById("move");
                with (obj.style) {
                    width = drag_left + (e.clientX - mouse_downX) + "px";
                }
            }
    
            function document_event_mouseup(e) {
                document.onmousemove = "";
                td_width = document.getElementById("drag").style.width;
            }
        </script>
    </head>
    <body>
        <table style=" 100%; height: 1000px" border="1px" cellpadding="0" cellspacing="0">
            <tr>
                <td id="move" style=" 180px; height: 1000px; vertical-align: text-top">ddddd
                </td>
                <td id="drag" onmousedown="drag_event_mousedown(arguments[0]);" style=" 1px; height: 1000px; vertical-align: text-top; cursor: e-resize;"></td>
                <td id="content" style="height: 1000px; background-color: Transparent; text-align: left; vertical-align: top;">fffffffffffffffffffffffffffffffffffffff
                </td>
            </tr>
        </table>
    </body>
    
    
    
    
    Jquery方式
        <style type="text/css">
            #container {
                 600px;
                height: 600px;
                background-color: #999999;
            }
    
            #markline {
                border-left: 1px solid #00686b;
                height: 333px;
                position: absolute;
                display: none;
                cursor: col-resize;
            }
        </style>
        <script src="../Script/jquery-1.9.1.js"></script>
        <script>
            $(function () {
                var mark_move = false;
                $("#canMove").mousedown(function (e) {
                    mark_move = true;
                    $("#markline").css("display", "block");
                });
    
                $(document).mousemove(function (e) {
                    if (mark_move) {
                        $("#markline").offset({ left: e.pageX });
                    }
                });
                $(document).mouseup(function () {
                    mark_move = false;
                    $("#markline").css("display", "none");
                });
            })
        </script>
    </head>
    <body>
        <div id="markline">
        </div>
        <div id="container">
            <div style=" 2px; height: 40px; background-color: #00ff21; cursor: col-resize;" id="canMove"></div>
        </div>
    </body>
    
    
    
  • 相关阅读:
    内网安全隐藏通信隧道基础&&网络通信隧道之一ICMP隧道
    windows server2012 r2 .net framework 3.5失败
    awvas启动不起来解决方案
    Kali Linux解压包命令:
    kali linux 中python2不带pip的解决方法
    内网渗透信息收集
    团队作业(二):需求分析
    ORA00600: internal error code, arguments: [16513], [1403] 恢复
    helpyouhelpyou@cock.li 加密数据库恢复
    合成孔径雷达成像——算法与实现内容简要:第1章
  • 原文地址:https://www.cnblogs.com/potoofly/p/3117356.html
Copyright © 2011-2022 走看看