鼠标拖动改变div容器的大小

妖狐艹你老母 2022-06-05 07:20 240阅读 0赞

html代码如下：

<div class="fu">  
      <div class="zi1">1111</div>  
      <div class="zi2" style="cursor:col-risize;" unselectable="on"  user-select: none;>2222</div>  
      <div class="zi3">3333</div>  
</div>

css代码如下：

<style>  
      .fu\{  
        width: 100%;  
        position: relative;  
        height: 500px;  
      \}  
      .zi1\{  
        position: absolute;  
        left: 0;  
        background: green;  
        width: 100%;  
        z-index: 5;  
        height: 100%;  
      \}  
      .zi2\{  
        position: absolute;  
        left: 100px;  
        background: red;  
        width: 5px;  
        z-index: 7;  
        height: 100%;  
      \}  
      .zi3\{  
        position: absolute;  
        left: 105px;  
        background: orange;  
        width: 100%;  
        z-index: 10;  
        height: 100%;  
      \}  
    </style>

js代码如下：

<script>  
      var shifou=false                                                      //设定一个变量用来改变true/false的状态  
      function tuozhuai()\{  
            $(document).mousemove(function(e)\{  
                if (shifou) \{  
                var zix=e.pageX;        //获取鼠标移动事件的X坐标  
                var zix1=zix+5  
                var zi3width=$('.fu').width()        //获取父容器的宽度  
                var zi3movewidth=zi3width-zix     //获取鼠标移动后子容器的宽度  
                $('.zi2').css('left',zix)                  //设置子容器的left值  
                $('.zi3').css('left',zix1)                //设置子容器的left值  
                $('.zi3').width(zi3movewidth)      //设置子容器的宽度  
                \}  
            \})         
      \}  
      $('.zi2').mousedown(function()\{            //鼠标mousedown时调用上面的函数  
        shifou=true;  
        tuozhuai()  
      \})  
      $('.zi2').mouseup(function()\{                //鼠标mouseup时改变shifou的值  
        shifou=false;  
      \})  
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读