登录
当前位置： 首页 > 工具软件 > 33-js-concepts > 使用案例 >

JS-3

太叔昊穹
2023-12-01

运动框架

链式运动框架

  • 运动停止时，执行函数
  • 运动停止时，开始下一次运动
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="move2.js"></script>
  <style>
    #div1 {
      width: 100px;
      height: 100px;
      background: lightcoral;
      opacity: 0.3;
    }
  </style>
</head>
<script>
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    oDiv.onmouseover = function () {
      startMove(oDiv, 'width', 300, function () {
        startMove(oDiv, 'height', 300, function () {
          startMove(oDiv, 'opacity', 100);
        });
      })
    }

    oDiv.onmouseout = function () {
      startMove(oDiv, 'opacity', 30, function () {
        startMove(oDiv, 'height', 100, function () {
          startMove(oDiv, 'width', 100);
        });
      })
    }
  }
</script>

<body>
  <div id="div1"></div>
</body>

</html>

完美运动框架

多个值同时变化

json的循环只能用for…in

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="move3.js"></script>
  <style>
    #div1 {
      width: 100px;
      height: 100px;
      background: lightcoral;
      opacity: 0.3;
      opacity: 0.3;
    }
  </style>
</head>
<script>
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    var oBtn = document.getElementById('btn1');

    oBtn.onclick = function () {
      startMove(oDiv, {
        width: 102,
        height: 400,
        opacity: 100
      })
    }
  }
</script>

<body>
  <input type="button" id="btn1" value="运动">
  <div id="div1"></div>
</body>

</html>

move3.js

// 完美运动框架

function getStyle(obj, name) {
  return getComputedStyle(obj, false)[name];
}

// startMove(oDiv, {width: 400; height: 400})
function startMove(obj, json, fnEnd) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
    var bStop = true; // 假设所有要改变的值都已经改变了

    for (const attr in json) {
      var cur = 0;
      if (attr === "opacity") {
        cur = parseFloat(getStyle(obj, attr)) * 100;
      } else {
        cur = parseInt(getStyle(obj, attr));
      }
      var speed = (json[attr] - cur) / 6;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

      if (cur !== json[attr]) bStop = false;

      if (attr === 'opacity') {
        obj.style.opacity = (cur + speed) / 100;
      } else {
        obj.style[attr] = cur + speed + 'px';
      }
    }

    if (bStop) {
      clearInterval(obj.timer);
      if (fnEnd) fnEnd();
    }
  }, 30)
}

JS事件

event对象和事件冒泡

event对象

  • 用来获取事件的详细信息：鼠标位置，键盘按键
  • document 的本质：document.childNode[0].tagName

如果想给整个页面加事件的话，就要给document加，而不是给document.body加

<script>
  window.onload = function () {
    document.onclick = function () {
      alert('aaa');
    }
  }
</script>

获取event对象（兼容性写法）

var oEvent = ev || event;

<script>
  window.onload = function () {
    // document.onclick = function () {
      document.onclick = function (ev) {
      // IE
      // alert(event.clientX + ', ' + event.clientY);

      // FF    需要给function传递一个ev参数
      // alert(ev.clientX+ ', ' + ev.clientY);

      // 兼容写法
      var oEvent = ev || event;
      alert(oEvent.clientX+ ', ' + oEvent.clientY);
    }
  }
</script>

事件流

  • 事件冒泡
    • 取消冒泡：oEvent.cancleBubble = true;
    • DOM 事件流

鼠标事件

  • 可视区位置：clientX / clientY (尽量配合scrollTop / scrollLeft来使用，不然容易出错)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="move3.js"></script>
  <style>
    div {
      width: 10px;
      height: 10px;
      background: lightcoral;
      position: absolute;
    }
  </style>
</head>
<script>
  function getPos(ev) {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    return {
      x: ev.clientX + scrollLeft,
      y: ev.clientY + scrollTop
    }
  }

  document.onmousemove = function (ev) {
    var aDiv = document.getElementsByTagName('div');
    var oEvent = ev || event;
    // 获取鼠标坐标
    var pos = getPos(oEvent);
    for (var i = aDiv.length - 1; i > 0; i--) {
      aDiv[i].style.left = aDiv[i - 1].offsetLeft + 'px';
      aDiv[i].style.top = aDiv[i - 1].offsetTop + 'px';
    }
    aDiv[0].style.left = pos.x + 'px';
    aDiv[0].style.top = pos.y + 'px';
  }
</script>

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

键盘事件

  • keyCode
    获取用户按下键盘的哪个按键
<script>
  document.onkeydown = function (ev) {
    var oEvent = ev || event;
    var oDiv = document.getElementById('div1');
    if (oEvent.keyCode == 37) {
      oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
    } else if (oEvent.keyCode == 39) {
      oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
    }
  }
</script>

<body>
  <div id="div1"></div>
</body>

其他属性

  • ctrlKey
  • shiftKey
  • altKey
<script>
  window.onload = function () {
    var oTxt1 = document.getElementById('txt1');
    var oTxt2 = document.getElementById('txt2');
    var oBtn = document.getElementById('btn1');

    oBtn.onclick = function () {
      oTxt2.value += oTxt1.value + '\n';
      oTxt1.value = '';
    }

    oTxt1.onkeydown = function (ev) {
      var oEvent = ev || event;
      if (oEvent.keyCode === 13) {
      // if (oEvent.keyCode === 13 && oEvent.ctrlKey) {
        oTxt2.value += oTxt1.value + '\n';
        oTxt1.value = '';
      }
    }
  }
</script>

<body>
  <input type="text" id="txt1">
  <input type="button" value="publish" id="btn1">
  <br>
  <textarea id="txt2" cols="30" rows="10"></textarea>
</body>

默认行为

阻止默认行为

  • 普通写法：return false
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="move3.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #div1 {
      width: 80px;
      background: lightcoral;
      position: absolute;
      border: 1px solid #ccc;
      display: none;
    }
  </style>
</head>
<script>
  document.oncontextmenu = function (ev) {
    // 自定义右键菜单事件
    var oEvent = ev || event;
    var oDiv = document.getElementById('div1');
    oDiv.style.display = 'block';
    oDiv.style.left = oEvent.clientX + 'px';
    oDiv.style.top = oEvent.clientY + 'px';

    // 阻止默认右键菜单事件
    return false;
  }

  document.onclick = function () {
    var oDiv = document.getElementById('div1');
    oDiv.style.display = 'none';
  }
</script>

<body>
  <div id="div1">
    <ul>
      <li>aaa</li>
      <li>bbb</li>
      <li>ccc</li>
    </ul>
  </div>
</body>

</html>
  • 只能输入数字的文本框
<script>
  window.onload = function () {
    var oTxt = document.getElementById('txt1');
    oTxt.onkeydown = function(ev){
      var oEvent = ev || event;
      // keyCode 的值在 48-57之间的就是数字
      // keyCode 的值为8的时候为删除间
      if(oEvent.keyCode != 8 && oEvent.keyCode < 48 || oEvent.keyCode > 57){
        return false;
      }
    }
  }
</script>

<body>
  <input type="text" id="txt1">
</body>

拖拽

简易拖拽

  • 拖拽原理
    • 距离不变
    • 三个事件

靠谱拖拽

原有拖拽的问题

  • 直接给document加事件
    防止拖出页面
  • 修正位置
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="move3.js"></script>
  <style>
    #div1 {
      width: 200px;
      height: 200px;
      position: absolute;
      background: lightseagreen;
    }
  </style>
</head>
<script>
  //  拖拽就是鼠标和要拖拽的div的左上角的距离不变
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function (ev) {
      var oEvent = ev || event;
      disX = oEvent.clientX - oDiv.offsetLeft;
      disY = oEvent.clientY - oDiv.offsetTop;

      document.onmousemove = function (ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - disX;
        var t = oEvent.clientY - disY;
        // 防止拖出去
        if (l < 0) {
          l = 0;
        } else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
          l = document.documentElement.clientWidth - oDiv.offsetWidth
        }
        if (t < 0) {
          t = 0;
        } else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
          t = document.documentElement.clientHeight - oDiv.offsetHeight
        }
        oDiv.style.left = l + 'px';
        oDiv.style.top = t + 'px';
      }

      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      }
      return false;
    }
  }
</script>

<body>
  <div id="div1"></div>
</body>
</html>

JS事件高级

事件绑定

  • IE事件绑定

    • attachEvent(事件名，函数)：绑定事件处理函数
    • removeEvent(事件名，函数)：解除绑定

  • DOM方式（Chrome，FF）

    • addEventListener(事件名，函数，捕获)：绑定事件处理函数
    • removeEventListener(事件名，函数，捕获)：解除绑定

  • 简单绑定

<script>
  window.onload = function () {
    var oBtn = document.getElementById('btn1');
    if (oBtn.attachEvent) {
      // attachEvent(事件名，函数)
      // 在IE下可以用attachEvent
      oBtn.attachEvent('onclick', function () {
        alert('a');
      })
      oBtn.attachEvent('onclick', function () {
        alert('b');
      })
    } else {
      // addEventListener(事件名，函数，false)
      // 在Chrome和FF中可以用addEventListener
      oBtn.addEventListener('click', function () {
        alert('a');
      }, false)
      oBtn.addEventListener('click', function () {
        alert('b');
      }, false)
    }
  }
</script>

<body>
  <input id="btn1" type="button" value="事件">
</body>
  • 将绑定工作写入函数中
<script>
  function myAddEvent(obj, ev, fn) {
    if (obj.attachEvent) {
      obj.addEvent('on' + ev, fn)
    } else {
      obj.addEventListener(ev, fn, false);
    }
  }
  window.onload = function () {
    var oBtn = document.getElementById('btn1');

    myAddEvent(oBtn, 'click', function () {
      alert('a');
    })
    myAddEvent(oBtn, 'click', function () {
      alert('b');
    })
  }
</script>

<body>
  <input id="btn1" type="button" value="事件">
</body>

高级拖拽

拖拽原理

  • 距离不见（物体和鼠标之间保持恒定距离）
  • 三个事件：down，move，up

限制范围

  • 对位置进行判断

不能拖出指定对象的div

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="move3.js"></script>
  <style>
    #div1 {
      width: 100px;
      height: 100px;
      position: absolute;
      background: lightseagreen;
    }
    #div2 {
      width: 400px;
      height: 300px;
      background: #ccc;
      position: relative;
    }
  </style>
</head>
<script>
  //  拖拽就是鼠标和要拖拽的div的左上角的距离不变
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function (ev) {
      var oEvent = ev || event;
      disX = oEvent.clientX - oDiv.offsetLeft;
      disY = oEvent.clientY - oDiv.offsetTop;

      document.onmousemove = function (ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - disX;
        var t = oEvent.clientY - disY;
        // 防止拖出去
        if (l < 0) {
          l = 0;
        } else if (l > oDiv2.offsetWidth - oDiv.offsetWidth) {
          l = oDiv2.offsetWidth - oDiv.offsetWidth
        }
        if (t < 0) {
          t = 0;
        } else if (t > oDiv2.offsetHeight - oDiv.offsetHeight) {
          t = oDiv2.offsetHeight - oDiv.offsetHeight
        }
        oDiv.style.left = l + 'px';
        oDiv.style.top = t + 'px';
      }

      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      }
      return false;
    }
  }
</script>

<body>
  <div id="div2">
    <div id="div1"></div>
  </div>
</body>

</html>

磁性吸附

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="move3.js"></script>
  <style>
    #div1 {
      width: 100px;
      height: 100px;
      position: absolute;
      background: lightseagreen;
    }

    #div2 {
      width: 800px;
      height: 500px;
      background: #ccc;
      position: relative;
    }
  </style>
</head>
<script>
  //  拖拽就是鼠标和要拖拽的div的左上角的距离不变
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function (ev) {
      var oEvent = ev || event;
      disX = oEvent.clientX - oDiv.offsetLeft;
      disY = oEvent.clientY - oDiv.offsetTop;

      document.onmousemove = function (ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - disX;
        var t = oEvent.clientY - disY;
        // 防止拖出去
        if (l < 50) {
          // 这样会有吸附的效果：当与左侧的距离<50的时候，就自动吸上去
          l = 0;
        } else if (l > oDiv2.offsetWidth - oDiv.offsetWidth) {
          l = oDiv2.offsetWidth - oDiv.offsetWidth
        }
        if (t < 50) {
          t = 0;
        } else if (t > oDiv2.offsetHeight - oDiv.offsetHeight) {
          t = oDiv2.offsetHeight - oDiv.offsetHeight
        }
        oDiv.style.left = l + 'px';
        oDiv.style.top = t + 'px';
      }

      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      }
      return false;
    }
  }
</script>

<body>
  <div id="div2">
    <div id="div1"></div>
  </div>
</body>

</html>

图片拖拽

阻止默认事件：return false;

文字选中

阻止默认事件：return false;

但是IE下面拖动会有问题，所以可以在这里用到 setCapture()

setCapture()是IE浏览器专用的

这块有一个合并代码的操作

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="move3.js"></script>
  <style>
    #div1 {
      width: 200px;
      height: 200px;
      position: absolute;
      background: lightseagreen;
    }
  </style>
</head>
<script>
  //  拖拽就是鼠标和要拖拽的div的左上角的距离不变
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function (ev) {
      var oEvent = ev || event;
      disX = oEvent.clientX - oDiv.offsetLeft;
      disY = oEvent.clientY - oDiv.offsetTop;

      if (oDiv.setCapture) {
        oDiv.onmousemove = MouseMove;
        oDiv.onmouseup = MouseUp;

        oDiv.setCapture();
      } else {
        document.onmousemove = MouseMove;
        document.onmouseup = MouseUp;

      }

      function MouseMove(ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - disX;
        var t = oEvent.clientY - disY;
        // 防止拖出去
        if (l < 0) {
          l = 0;
        } else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
          l = document.documentElement.clientWidth - oDiv.offsetWidth
        }
        if (t < 0) {
          t = 0;
        } else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
          t = document.documentElement.clientHeight - oDiv.offsetHeight
        }
        oDiv.style.left = l + 'px';
        oDiv.style.top = t + 'px';
      }

      function MouseUp() {
        // 这里的this指的是oDiv
        this.onmousemove = null;
        this.onmouseup = null;
        if (oDiv.releaseCapture) {
          oDiv.releaseCapture();
        }
      }

      // Chrome FF IE9
      return false;
    }
  }
</script>

<body>
  cndjsknk<br>
  cndknakl
  <div id="div1">cndjnak</div>
  buebajna
</body>

</html>

与DOM配合

  • 带框的拖拽
  • 保留原有位置的拖拽
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="move3.js"></script>
  <style>
    #div1 {
      width: 200px;
      height: 200px;
      position: absolute;
      background: lightseagreen;
    }

    .box {
      border: 1px dashed black;
      position: absolute;
    }
  </style>
</head>
<script>
  //  拖拽就是鼠标和要拖拽的div的左上角的距离不变
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function (ev) {
      var oEvent = ev || event;
      disX = oEvent.clientX - oDiv.offsetLeft;
      disY = oEvent.clientY - oDiv.offsetTop;

      var oBox = document.createElement('div');
      oBox.className = 'box';
      oBox.style.width = oDiv.offsetWidth - 2 + 'px';
      oBox.style.height = oDiv.offsetHeight - 2 + 'px';

      oBox.style.left = oDiv.offsetLeft + 'px';
      oBox.style.top = oDiv.offsetTop + 'px';

      document.body.appendChild(oBox);

      if (oDiv.setCapture) {
        oDiv.onmousemove = MouseMove;
        oDiv.onmouseup = MouseUp;

        oDiv.setCapture();
      } else {
        document.onmousemove = MouseMove;
        document.onmouseup = MouseUp;

      }

      function MouseMove(ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - disX;
        var t = oEvent.clientY - disY;
        // 防止拖出去
        if (l < 0) {
          l = 0;
        } else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
          l = document.documentElement.clientWidth - oDiv.offsetWidth
        }
        if (t < 0) {
          t = 0;
        } else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
          t = document.documentElement.clientHeight - oDiv.offsetHeight
        }
        oBox.style.left = l + 'px';
        oBox.style.top = t + 'px';
      }

      function MouseUp() {
        // 这里的this指的是oDiv
        this.onmousemove = null;
        this.onmouseup = null;

        oDiv.style.left = oBox.offsetLeft + 'px';
        oDiv.style.top = oBox.offsetTop + 'px';

        document.body.removeChild(oBox);
        if (oDiv.releaseCapture) {
          oDiv.releaseCapture();
        }
      }

      // Chrome FF IE9
      return false;
    }
  }
</script>

<body>
  <div id="div1"></div>
</body>

</html>

自定义滚动条

通过滚动条来控制div的样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #parent {
      width: 600px;
      height: 20px;
      background: #ccc;
      position: relative;
      margin: 10px auto;
    }

    #div1 {
      width: 20px;
      height: 20px;
      background: lightsalmon;
      position: absolute;
      top: 0;
      left: 0;
    }

    #div2 {
      width: 300px;
      height: 300px;
      background: lightsteelblue;
      opacity: 0;
    }
  </style>
</head>
<script>
  //  拖拽就是鼠标和要拖拽的div的左上角的距离不变
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    var oParent = document.getElementById('parent');
    var oDiv2 = document.getElementById('div2');
    var disX = 0;
    // var disY = 0;
    oDiv.onmousedown = function (ev) {
      var oEvent = ev || event;
      disX = oEvent.clientX - oDiv.offsetLeft;
      // disY = oEvent.clientY - oDiv.offsetTop;

      if (oDiv.setCapture) {
        oDiv.onmousemove = MouseMove;
        oDiv.onmouseup = MouseUp;

        oDiv.setCapture();
      } else {
        document.onmousemove = MouseMove;
        document.onmouseup = MouseUp;

      }

      function MouseMove(ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - disX;
        // var t = oEvent.clientY - disY;
        // 防止拖出去
        if (l < 0) {
          l = 0;
        } else if (l > oParent.offsetWidth - oDiv.offsetWidth) {
          l = oParent.offsetWidth - oDiv.offsetWidth;
        }

        oDiv.style.left = l + 'px';
        // 获取滑块拖动的比例
        var scale = l / (oParent.offsetWidth - oDiv.offsetWidth);
        document.title = scale;

        // 通过拖动滑块的比例来控制div2的大小
        // oDiv2.style.width = 400 * scale + 'px';
        // oDiv2.style.height = 400 * scale + 'px';

        // 通过拖动滑块的比例来控制div2的透明度
        oDiv2.style.opacity = scale;
      }

      function MouseUp() {
        // 这里的this指的是oDiv
        this.onmousemove = null;
        this.onmouseup = null;

        if (oDiv.releaseCapture) {
          oDiv.releaseCapture();
        }
      }

      // Chrome FF IE9
      return false;
    }
  }
</script>

<body>
  <div id="parent">
    <div id="div1"></div>
  </div>
  <div id="div2"></div>
</body>

</html>

通过滚动条来控制div中的内容滚动

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #parent {
      width: 600px;
      height: 20px;
      background: #ccc;
      position: relative;
      margin: 10px auto;
    }

    #div1 {
      width: 20px;
      height: 20px;
      background: lightsalmon;
      position: absolute;
      top: 0;
      left: 0;
    }

    #div2 {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      overflow: hidden;
      position: relative;
    }

    #div3 {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<script>
  //  拖拽就是鼠标和要拖拽的div的左上角的距离不变
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    var oParent = document.getElementById('parent');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');
    var disX = 0;
    // var disY = 0;
    oDiv.onmousedown = function (ev) {
      var oEvent = ev || event;
      disX = oEvent.clientX - oDiv.offsetLeft;
      // disY = oEvent.clientY - oDiv.offsetTop;

      if (oDiv.setCapture) {
        oDiv.onmousemove = MouseMove;
        oDiv.onmouseup = MouseUp;

        oDiv.setCapture();
      } else {
        document.onmousemove = MouseMove;
        document.onmouseup = MouseUp;

      }

      function MouseMove(ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - disX;
        // var t = oEvent.clientY - disY;
        // 防止拖出去
        if (l < 0) {
          l = 0;
        } else if (l > oParent.offsetWidth - oDiv.offsetWidth) {
          l = oParent.offsetWidth - oDiv.offsetWidth;
        }

        oDiv.style.left = l + 'px';
        // 获取滑块拖动的比例
        var scale = l / (oParent.offsetWidth - oDiv.offsetWidth);
        document.title = scale;

        // 通过拖动滑块的比例来控制div3
        oDiv3.style.top = -scale * (oDiv3.offsetHeight - oDiv2.offsetHeight) + 'px';
      }

      function MouseUp() {
        // 这里的this指的是oDiv
        this.onmousemove = null;
        this.onmouseup = null;

        if (oDiv.releaseCapture) {
          oDiv.releaseCapture();
        }
      }

      // Chrome FF IE9
      return false;
    }
  }
</script>

<body>
  <div id="parent">
    <div id="div1"></div>
  </div>
  <div id="div2">
    <div id="div3">
      cbdjsbbiavcwebncdK<br>
      hunvugbsancsapcnam<br>
      andaencjdmov;cmz<br>
      cbdjsbbiavcwebncdK<br>
      hunvugbsancsapcnam<br>
      andaencjdmov;cmz<br>
      cbdjsbbiavcwebncdK<br>
      hunvugbsancsapcnam<br>
      andaencjdmov;cmz<br>
      cbdjsbbiavcwebncdK<br>
      hunvugbsancsapcnam<br>
      andaencjdmov;cmz<br>
      cbdjsbbiavcwebncdK<br>
      hunvugbsancsapcnam<br>
      andaencjdmov;cmz<br>
      cbdjsbbiavcwebncdK<br>
      hunvugbsancsapcnam<br>
      andaencjdmov;cmz<br>
      cbdjsbbiavcwebncdK<br>
      hunvugbsancsapcnam<br>
      andaencjdmov;cmz<br>
      cbdjsbbiavcwebncdK<br>
      hunvugbsancsapcnam<br>
      andaencjdmov;cmz<br>
      cbdjsbbiavcwebncdK<br>
      hunvugbsancsapcnam<br>
      andaencjdmov;cmz<br>
      dmov;cmz<br>
      cbdjsbbiavcwebncdK<br>
      hunvugbsancsapcnam<br>
      andaencjdmov;cmz<br>
      cbdjsbbiavcwebncdK<br>
      hunvugbsancsapcnam<br>
      andaencjdmov;cmz<br>
      cbdjsbbiavcwebncdK<br>
      hunvugbsancsapcnam<br>
      andaencjdmov;cmz<br>
      cbdjsbbiavcwebncdK<br>
    </div>
  </div>
</body>

</html>
 类似资料：

相关阅读

js module大战Firebase Auth JS / PHPJSF，HighCharts和JSReactJS-.JS与.JSXAngular JS Break ForEach

相关文章

JS：手写快速排序算法（*****五颗星）8.13美团前端笔试题 注意js输入的坑手摸手解析JS手写面试题题系列2——实现throttle（节）DBMS第三范式（3NF）DTD示例3

相关问答

如何使用React JS和Node JS发布REST API图表。JS垂直线与力矩。JS水平轴Node JS Promise.all和forEachMongoDB与节点JsJS中的MongoDB ObjectID

相关文档

D3.js 帮助文档D3.js 入门教程D3.js API 中文手册JS 函数式编程指南Web3.js API 中文文档 v0.2
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.