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

妖狐艹你老母 2022-06-05 07:20 235阅读 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 条评论，235人围观）

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

相关阅读

相关 js实现div动态改变大小

网上看到的相关代码，记下，以备日后使用。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

痛定思痛。/ 2022年08月20日 06:09/ 0 赞/ 312 阅读

相关 8点改变div大小之控制范围

还是模仿不过在范围的计算上跟cloudgamer已经有了点比较大的差异了!~ 感觉写的不够理想，代码有冗余，还得加把劲呀!~ 我会再次修改的！~ <!DOCTYPE

红太狼/ 2022年08月06日 07:08/ 0 赞/ 123 阅读

相关 div八点大小改变

依旧是学习的别人的,模仿的(Ps:我自己也先有写一遍,只是觉得自己写的确实没别人好,就模仿别人了) <!DOCTYPE html PUBLIC "-//W3C//DTD

╰半夏微凉°/ 2022年08月06日 06:22/ 0 赞/ 138 阅读

相关鼠标拖动面板

之前写过一篇关于form表单验证随笔，后来添加了一点点内容，使得可以使用鼠标将其拖动，为了完整性，还是写一遍随笔吧；加上这部分内容后，HTML和CSS部分，也进行了少量修改，这

女爷i/ 2022年06月16日 08:28/ 0 赞/ 190 阅读

相关可拖动的DIV

<!DOCTYPE html> <html> <head> <title>test</title> <script sr

淡淡的烟草味﹌/ 2022年06月14日 02:18/ 0 赞/ 191 阅读

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

html代码如下： <div class="fu"> <div class="zi1">1111</div> <div class="zi2"

妖狐艹你老母/ 2022年06月05日 07:20/ 0 赞/ 236 阅读

相关实现div鼠标拖动效果

实现这个效果的关键是给div的定位设置成absolute,然后获得鼠标移动后的位置坐标并给要移动的div。我将它封装成了一个函数，只需要传入参数即可使用。 dow

深碍√TFBOYSˉ_/ 2022年05月13日 07:36/ 0 赞/ 236 阅读

相关 MFC_改变窗口大小，随着鼠标的拖动改变

今天在做一个视频播放器的时候，需要用到不同电脑之间分辨率的不同，让其根据当前电脑的分辨率显示其大小首先假设这个对话框类为CMyDialog。这篇文章转载了：http

电玩女神/ 2021年11月26日 23:31/ 0 赞/ 385 阅读

相关鼠标的拖动操作

unit Unit1; interface uses Windows, Messages, SysUtils, Vari

超、凢脫俗/ 2021年11月02日 15:56/ 0 赞/ 294 阅读

相关 js 鼠标拖动div

div中心跟踪鼠标动而动得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离 div任意位置随鼠标动而动得到鼠标第一次坐标，移动时div

忘是亡心i/ 2021年07月24日 17:05/ 0 赞/ 417 阅读