首页 > 代码库 > 内容的显示/隐藏&&拖拽

内容的显示/隐藏&&拖拽

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>显示/隐藏&&拖拽</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  #box{
    position: relative;
  }
  input{
    cursor: pointer;
  }
  #inner{
    width: 100%;
    height: 900px;
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: none;
  }
  span{
    width: 200px;
    height: 200px;
    display: block;
    background-color: #fff;
    position: absolute;
    left: 200px;
    top: 200px;
    cursor: move;//将鼠标改为十字架
  }
  a{
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 15px;
    color: pink;
    text-decoration: none;
  }
</style>
<body>
  <div id="box">
    <input type="button" value="http://www.mamicode.com/显示/隐藏">
    <div id="inner">
      <span>
        <a href="http://www.mamicode.com/###">X</a>
      </span>
    </div>
  </div>
  <script>
    var inputs=document.getElementsByTagName("input")[0];
    var inner=document.getElementById("inner");
    var spans=inner.getElementsByTagName("span")[0];
    var as=inner.getElementsByTagName("a")[0];


    // 鼠标点击事件
    inputs.onclick=function(){
      inner.style.display="block";
    }
    as.onclick=function(){
      inner.style.display="none";
    }

    // 鼠标拖拽,内容不离开可视区
    spans.onmousedown=function(e){
      var ev=e||window.event;//兼容浏览器
      var l=ev.clientX-spans.offsetLeft;// 鼠标到内容即spans左边的距离(鼠标每点一次以后固定值)
      var t=ev.clientY-spans.offsetTop; // 鼠标到内容即spans上边的距离(鼠标每点一次以后固定值)
      // console.log(l)
      // console.log(spans.offsetLeft)
      spans.onmousemove=function(e){
         var ev=e||window.event;
         var nl=ev.clientX-l;// 内容即spans到浏览器左边的距离(随鼠标的改变距离改变——不定)
         var nt=ev.clientY-t;// 内容即spans到浏览器上边的距离(随鼠标的改变距离改变——不定)

         // 使内容即spans不离开可视区
         // 左右
         if(nl<0){
            nl=0;
         }else if(nl>document.documentElement.clientWidth-spans.offsetWidth){
         // document.documentElement.clientWidth——表示浏览器可视区的宽度(不包括边线)
         nl=document.documentElement.clientWidth-spans.offsetWidth;
         // console.log(document.documentElement.clientWidth)
         }

        // 上下
        if(nt<0){
           nt=0;
        }else if(nt>document.documentElement.clientHeight-spans.offsetHeight){
          // document.documentElement.clientHeight——表示浏览器可视区的高度(不包括边线)
          nt=document.documentElement.clientHeight-spans.offsetHeight;
          // console.log(document.documentElement.clientHeight)
        }
        spans.style.left=nl+‘px‘;// 内容即spans到浏览器左边的距离+单位——为内容即span距离浏览器左边的距离
        spans.style.top=nt+‘px‘;// 内容即spans到浏览器上边的距离+单位——为内容即span距离浏览器上边的距离
        // console.log(nl)
      }
      spans.onmouseup=function(){
      spans.onmousemove=null;
    }
  }
</script>
</body>
</html>

内容的显示/隐藏&&拖拽