js实现移动蒙版层

最新推荐文章于 2024-07-17 15:01:08 发布

喵_美

最新推荐文章于 2024-07-17 15:01:08 发布

阅读量152

点赞数 1

分类专栏：案例文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_34708564/article/details/140292017

版权

案例专栏收录该内容

27 篇文章 0 订阅

订阅专栏

移动蒙版层

可在整个页面拖动方块，但方块不能超出页面

在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动蒙版层案例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      position: relative;
    }

    .container {
      position: relative;
      top: 10px;
      left: 10px;
      width: 800px;
      height: 800px;
      background-color: #368;
    }

    .mask {
      position: absolute;
      width: 400px;
      height: 280px;
      padding: 20px;
      background-color: #690;
      box-shadow: 0 0 8px #222;
      cursor: move;
    }
  </style>
</head>

<body>

 
    <div class="mask">

    </div>
 

  <script src='js/common.js'></script>
  <script>
    var oMask = $('.mask')


    var eventTypeMap = {
      isDown : false,
      startPos : {
        x : 0,
        y : 0,
        left : 0,
        top : 0
      },
      targetEle : null,
      limit : {
        maxLeft :window.innerWidth - oMask.offsetWidth,
        maxTop : window.innerHeight - oMask.offsetHeight,
      },
      'mousedown': function (e) {
        this.isDown = true
        this.targetEle = e.target
        this.startPos.x = e.clientX,
        this.startPos.y = e.clientY
        this.startPos.left = getPosition(oMask).left
        this.startPos.top = getPosition(oMask).top
      },
      'mousemove': function (e) {
        if(this.isDown === true) {
          var diffX = e.clientX - this.startPos.x
          var diffY = e.clientY - this.startPos.y
          var diffLeft = this.startPos.left + diffX
          var diffTop = this.startPos.top + diffY
          diffLeft = Math.max(0, diffLeft)
          diffLeft = Math.min(this.limit.maxLeft, diffLeft)
          diffTop = Math.max(0, diffTop)
          diffTop = Math.min(this.limit.maxTop, diffTop)
          setStyle(oMask, {
            top : diffTop + 'px',
            left : diffLeft + 'px',
           
          })
          if (e.clientX < 0 || e.clientY < 0) {
            isDown = false;
          }
        }
      },
      'mouseup': function (e) {
        this.isDown = false
        this.targetEle = null
      },
    }
 
    oMask.addEventListener('mousedown' , drawEle, false)
    document.addEventListener('mousemove' , drawEle, false)
    document.addEventListener('mouseup' , drawEle, false)
    
    function drawEle (e) {
      if(eventTypeMap[e.type] && typeof eventTypeMap[e.type] === 'function') {
        eventTypeMap[e.type](e)
      }
    }
  </script>
</body>

</html>