[前端] 不同h标签的使用方法

[mtalab学习记录03]matlab中输入LaTeX公式

  返回  

鼠标点击可以拖拽

2021/8/20 18:14:13 浏览:
<!DOCTYPE html>
<html lang="en">

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

    #box{
      width: 200px;
      height: 200px;
      background: orangered;
      position: absolute;
    }
    p {
      width: 100%;
      line-height: 40px;
      background: green;
      text-align: center;
      color:white;
      font-size: 20px;
      user-select: none;
    }
  </style>
</head>

<body>
  <div id="box">
    <p id="title">1223</p>
  </div>
  <script>
    let box = document.getElementById('box');
    let title = document.getElementById('title');
    let left = document.documentElement.clientWidth/2-box.offsetWidth/2;
    let t = document.documentElement.clientHeight/2-box.offsetHeight/2;
    box.style.left = left + 'px';
    box.style.top = t + 'px';

    // 在页面渲染的时候,不能直接给title绑定鼠标移动事件,只有当用户鼠标在title元素上按下的时候,在给title绑定鼠标移动事件(onmousemove),当鼠标抬起的时候移除移动事件(onmousemove)
    function move(e){
      console.log('move');
      // 先获取当前光标的最新的clientX和clinetY的值
      let clientX = e.clientX;
      let clientY = e.clientY;
      // this==>title
      // 给box设置最新的left和top即可
      // box盒子最新的left值等于 ==光标移动的距离(光标最新的clientX-光标初始的clientX)+盒子初始的位置的left值

      // 光标最新的clientX-光标初始的clientX+盒子初始的位置的left值
      box.style.left = clientX - this.initClientX + this.initLeft + 'px';
      box.style.top = clientY - this.initClientY + this.initTop + 'px';
    }
    function up(){

      window.onmousemove = null;
    }
    function down(e){
      // 在用户鼠标按下的时候,我会把当前起初的box的left值和光标的clientX值保存下来
      // this-->title

      // 把初始的left值保存到title身上
      this.initLeft = parseFloat(box.style.left);
      this.initTop = parseFloat(box.style.top);
      this.initClientX = e.clientX;
      this.initClientY = e.clientY;
      console.dir(this);// -->title
      window.onmousemove = move.bind(this);
    }
    title.onmousedown = down;
    window.onmouseup = up;
  </script>
</body>

</html>

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号