zoukankan      html  css  js  c++  java
  • js 实现分割条

    js 实现 切分条效果, 为了熟悉js  写法,纯javascript 脚本编写

    简单介绍几个函数:

    setCapture()函数的作用就是将后续的mouse事件都发送给这个对象,

    releaseCapture() 就是将鼠标事件还回去

    由document、window、object之类的自行来处理,这样就保证了在拖动的过程中,不会由于经过了其它的元素而受到干扰。另外,还有一个很重 要的事情是,在Win32上,mouse move的事件不是一个连续的,也就是说,并不是我们每次移动1px的鼠标指针,就会发生一个mousemove,windows会周期性检查mouse的位置变化来产生mousemove的事件。所以,如果是一个很小的页面对象,比如一个直径5px的圆点,如果没有setCapture和releaseCapture,那么在鼠标按住之后,快速的移动鼠标,就有可能鼠标移动走了,但是小圆点还在原地,就是因为下一次的mousemove事 件已经不再发给这个圆点对象了。

    var siblingElem = function (elem)
    {
        var _nodes = [];
    
        while ((elem = elem.previousSibling))
        {
            if (elem.nodeType === 1)
            { _nodes.push(elem); break; }
        }
        return _nodes[0];
    }
    var nextElem = function (elem)
    {
        var _nodes = [];
        while ((elem = elem.nextSibling))
        {
            if (elem.nodeType === 1)
            { _nodes.push(elem); break; }
        }
        return _nodes[0];
    }
    获取相邻两个左右两个元素

    为了方便运用编写一个js 对象

    主要方法:根据鼠标移动的坐标计算左右两边容器的宽度


    move = function (event, f) { if (f.flag) { if (f.iPner2With - event.clientX - f.ele.offsetWidth > 0) { f.objLeft.style.left = (event.clientX + f.ele.offsetWidth) + "px"; f.objRight.style.width = (f.iPner2With - event.clientX - f.ele.offsetWidth) + "px"; f.objLeft.style.width = event.clientX + "px"; } if (!f.ele.releaseCapture) { event.preventDefault(); } } }
    /****************************************
    
    @Name:LR_spliter 实现table 和div 分割条效果
    @Author:胡泽云
    @Date:2014-08-27
    @邮箱:hzeyun@sina.com
    @qq:984559465
    @说明: 实例化 new  LR_spliter("控件id")
            
    */
    var siblingElem = function (elem)
    {
        var _nodes = [];
    
        while ((elem = elem.previousSibling))
        {
            if (elem.nodeType === 1)
            { _nodes.push(elem); break; }
        }
        return _nodes[0];
    }
    var nextElem = function (elem)
    {
        var _nodes = [];
        while ((elem = elem.nextSibling))
        {
            if (elem.nodeType === 1)
            { _nodes.push(elem); break; }
        }
        return _nodes[0];
    }
    zy_spliter = function (id)
    {
        this.flag = false;
        this.objSplitter = false;
        this.iPner2With = 0;
    
        //获取对象的左右连个容器
        this.ele = document.getElementById(id);
        this.objLeft = siblingElem(this.ele);
        this.objRight = nextElem(this.ele);
        this.ele.style.cursor = "w-resize"; //设置鼠标样式
        up = function (event, t)
        {
            if (t.flag)
            {
                if (t.ele.releaseCapture)
                {
                    t.ele.releaseCapture();
                }
                else
                {
                    document.removeEventListener('mouseup', t.up, true);
                    document.removeEventListener('mousemove', t.move, true);
                    event.preventDefault();
                }
    
                t.flag = false;
            }
        };
        down = function (event, f)
        {
    
            if (!f.flag)
            {
                if (f.ele.setCapture)
                    f.ele.setCapture();
                else
                {
                    document.addEventListener('mouseup', up, true);
                    document.addEventListener('mousemove', move, true);
                    event.preventDefault();
                }
    
                f.flag = true;
    
                if (f.ele.parentNode.tagName == "TD")
                {
                    f.iPner2With = f.ele.parentNode.parentNode.offsetWidth;
                }
                else
                {
                    f.iPner2With = f.ele.parentNode.offsetWidth;
                }
    
            }
        };
        move = function (event, f)
        {
    
            if (f.flag)
            {
    
                if (f.iPner2With - event.clientX - f.ele.offsetWidth > 0)
                {
                    f.objLeft.style.left = (event.clientX + f.ele.offsetWidth) + "px";
                    f.objRight.style.width = (f.iPner2With - event.clientX - f.ele.offsetWidth) + "px";
                    f.objLeft.style.width = event.clientX + "px";
                }
                if (!f.ele.releaseCapture)
                {
                    event.preventDefault();
                }
            }
        }
        var t = this;
        this.ele.onmousedown = function ()
        {
            down(event, t);
        }
    
        this.ele.onmouseup = function ()
        {
            up(event, t);
        }
    
        this.ele.onmousemove = function ()
        {
            move(event, t);
        }
        return this;
    
    
    
    }
    所有代码

    实现效果: 第一种左右两边容器是div  , 第二种 是分割table 单元格的效果

     

     前台html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="../Js/zeyun_spliter.js"></script>
        <script type="text/javascript">
            window.onload = function ()
            {
                var lsp = new zy_spliter("soliterSS");
                var lsp2 = new zy_spliter("sp2");
            }
           
        </script>
    </head>
    <body>
        <div style="height: 100px; 900px;">
            <div style=" 450px; float: left; background: red; height: 100%; word-break: break-all;
                word-wrap: break-word;">
                asdsdf
            </div>
            <div id="soliterSS" style=" 4px; height: 100%; float: left; ">
            </div>
            <div style=" 442px; float: left; background: blue; height: 100%; position: relative;
                word-break: break-all; word-wrap: break-word;">
                adsfadsfjkl</div>
        </div>
        <p> table</p>
        <table style="height: 100px; 900px;" cellspacing="0" cellpadding="0">
            <tr>
                <td style="">
                </td>
                <td id="sp2" style=" 4px; height: 100%; ">
                    <div style="height: 100%;">
                    </div>
                </td>
                <td style="">
                </td>
            </tr>
        </table>
    </body>
    </html>

  • 相关阅读:
    896. Monotonic Array单调数组
    865. Smallest Subtree with all the Deepest Nodes 有最深节点的最小子树
    489. Robot Room Cleaner扫地机器人
    JavaFX
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
  • 原文地址:https://www.cnblogs.com/hzy168/p/3940469.html
Copyright © 2011-2022 走看看