【js---鼠标点击可拖动左右内容的实现】

最新推荐文章于 2024-04-24 12:36:15 发布

呐呐呐呐。

最新推荐文章于 2024-04-24 12:36:15 发布

阅读量866

点赞数 2

文章标签： javascript 计算机外设 css

本文链接：https://blog.csdn.net/m0_56542349/article/details/130790711

版权

js—鼠标点击可拖动左右内容的实现

实现效果

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>左右可拖动的内容显示区</title>
  <style>
     ul,
    li {
      margin: 0;
      padding: 0;
    }

    body {
      font: 14px/1.5 Arial;
      color: #666;
    }

    #box {
      position: relative;
      width: 600px;
      height: 400px;
      border: 2px solid #000;
      margin: 10px auto;
      overflow: hidden;
    }

    #box ul {
      list-style-position: inside;
      margin: 10px;
    }

   #top,
    #bottom {
      color: #FFF;
      width: 300px;
      height: 400px;
      overflow: hidden;
    }

     #top {
      background: green;
      float: left
    }

    #bottom {
      background: skyblue;
      float: right
    }
    #line {
      position: absolute;
      top: 0;
      left: 50%;
      height: 100%;
      width: 4px;
      overflow: hidden;
      background: red;
      cursor: w-resize;
    } 
  </style>
  <script>
    function $(id) {
      return document.getElementById(id)
    }
    window.onload = function () {
      var oBox = $("box"), oTop = $("top"), oBottom = $("bottom"), oLine = $("line");
      oLine.onmousedown = function (e) {
        // 记录鼠标按下的相对位置
        var disX = (e || event).clientX;//鼠标距离浏览器可视窗口的位置
        oLine.left = oLine.offsetLeft;//线条距离relative定位元素的左边
        document.onmousemove = function (e) {
          // 鼠标点击时oLine.left是确定的，所以要动态的计算出鼠标距离浏览器可视窗口的位置
          // 计算出分栏元素移动后的位置
          var iT = oLine.left + ((e || event).clientX - disX);
          // e:触发当前事件对象  tarnameb: 该事件的元素  srcElement:兼容IE浏览器
          var e = e || window.event, tarnameb = e.target || e.srcElement;
          // 取可视区域宽度和分栏可移动宽度的差值，计算出分栏的可移动距离限制
          var maxT = oBox.clientWight - oLine.offsetWidth;
          oLine.style.margin = 0;
          // 可能是负数或超出可移动范围，当 iT 小于 0 时，即分栏移动超出了左边界，把iT设置为0，
          // 为了避免分栏元素移动到容器的外部
          iT < 0 && (iT = 0);
          // iT 是分栏元素移动后的位置，而 maxT 则是分栏的最大可移动距离。当 iT 超过了 maxT 时，
          // 说明分栏已经移动到右边界的外部了，此时需要将 iT 的值设置为 maxT
          iT > maxT && (iT = maxT);
          // 让分栏元素实现跟随鼠标拖动而移动
          // oTop.style.width， 保证顶部占位元素的宽度和分栏元素的位置一致
          oLine.style.left = oTop.style.width = iT + "px";
          // 以保证底部占位元素的宽度和容器右边界之间的距离一致
          oBottom.style.width = oBox.clientWidth - iT + "px";
          $("msg").innerText ='iT' + iT +'oLine.left' + oLine.left + '(e || event).clientX' + (e || event).clientX + 'disx'+ disX + 'top.width:' + oLine.style.width + '---bottom.width:' + oBottom.style.width + '---oLine.offsetLeft:' + oLine.offsetLeft + '---disX:' + disX + '---tarnameb:' + tarnameb.tagName;
          // 阻止了默认事件和事件冒泡的触发
          return false
        };
        // 鼠标松开后，解除鼠标移动事件和鼠标松开事件的绑定，并且释放元素的鼠标捕获。
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
          oLine.releaseCapture && oLine.releaseCapture()
        };
        // 实现鼠标捕获事件
        oLine.setCapture && oLine.setCapture();
        return false
      };
    };
  </script>
</head>

<body>
  <center>左右拖动红条改变显示区域宽度<span id="msg"></span></center>
  <div id="box">
    <div id="top">
      <ul>
        <li><a href="#" target="_blank">jQuery初学实例代码集</a></li>
        <li><a href="#" target="_blank">100多个ExtJS应用初学实例集</a></li>
        <li><a href="#" target="_blank">基于jQuery的省、市、县三级级联菜单</a></li>
        <li><a href="#" target="_blank">一个类似QQ网的JS相册展示特效</a></li>
        <li><a href="#" target="_blank">eWebEditor v4.60 最新通用精简版</a></li>
        <li><a href="#" target="_blank">FCKeditor 2.6.4.1 网页编辑器</a></li>
        <li><a href="#" target="_blank">jQuery平滑图片滚动</a></li>
        <li><a href="#" target="_blank">Xml+JS省市县三级联动菜单</a></li>
        <li><a href="#" target="_blank">jQuery 鼠标滑过链接文字弹出层提示的效果</a></li>
        <li><a href="#" target="_blank">JS可控制的图片左右滚动特效（走马灯）</a></li>
      </ul>
    </div>
    <div id="bottom">
      <ul>
        <li><a href="#" target="_blank">网页上部大Banner广告特效及图片横向滚动代码</a></li>
        <li><a href="#" target="_blank">FlexSlider网页广告、图片焦点图切换插件</a></li>
        <li><a href="#" target="_blank">兼容IE，火狐的JavaScript图片切换</a></li>
        <li><a href="#" target="_blank">jQuery仿ios无线局域网WIFI提示效果（折叠面板）</a></li>
        <li><a href="#" target="_blank">TopUp js图片展示及弹出层特效代码</a></li>
        <li><a href="#" target="_blank">jQuery仿Apple苹果手机放大镜阅读效果</a></li>
        <li><a href="#" target="_blank">Colortip 文字title多样式提示插件</a></li>
        <li><a href="#" target="_blank">网页换肤，Ajax网页风格切换代码集</a></li>
        <li><a href="#" target="_blank">超强大、漂亮的蓝色网页弹出层效果</a></li>
        <li><a href="#" target="_blank">jQuery 图像预览功能的代码实现</a></li>
      </ul>
    </div>
    <div id="line"></div>
  </div>
</body>

</html>

右边限制最大宽度和最小宽度

只需要改变对IT变量的限制即可

     //当 iT 小于 150 时，把iT设置为150，
     // 为了避免分栏元素移动到容器的外部
     iT < 150 && (iT =150);
     // iT 是分栏元素移动后的位置，而 maxT 则是分栏的最大可移动距离。当 iT 超过了 maxT 时，
     // 说明分栏已经移动到右边界的外部了，此时需要将 iT 的值设置为 maxT
     iT > 350 && (iT = 350);