首页 > > 网页制作 > css >

鼠标移动登陆框跟随

2018-07-12 08:00:23来源：博客园阅读 ()

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>鼠标移动 登陆框跟随</title>
 </head>
 <style type="text/css">
   head,body{
     margin:0;
     padding:0;
  }

   .top{
     height:30px;
     background:#336699;
     padding-left:20px;
     color:white;
     line-height:30px;
   }
   .regBox{
      width:310px;
      position:absolute;
      top:228px;
      left:528px;

   }
   .register{
     cursor:pointer;
   }
   .regMessage{
      width:300px;
      height:200px;
      display:none;
      border:5px solid #c0c0c0;
   }
   .regMessage .dt{
     background:#336666;
     height:30px;
     line-height:30px;
     color:#fbfbfb;
   }
   .regMessage .dt span{
      
      cursor:move;

   }
   .regMessage .dt span:nth-child(1){
     float:left;
   }
   .regMessage .dt span:nth-child(2){
     float:right;
   }
 
  </style>
 <body>
  <div class="top">
    <span class="register">注册登陆</span>
  </div>
    
    <div class="regBox">
   <div  class="regMessage">
       <div class="dt"><span>注册信息 (可以拖拽) </span><span class="close">【关闭】</span></div>
   </div>
   </div>
   <script type="text/javascript">

      function show(ele){
        ele.style.display="block";
      }

      function hide(ele){
         ele.style.display="none";
      };
     var register= document.querySelector(".register");
     var regMessage = document.querySelector(".regMessage");
      var regBox = document.querySelector(".regBox");
     var close = document.querySelector(".close");
             register.addEventListener("click",function(e)
             {
                 show(regMessage);
             },false);

              close.addEventListener("click",function(e)
             {
                e.stopPropagation();
                 hide(regMessage);
             },false);

            regMessage.children[0].onmousedown=function(event){
                    
                      var  e=event||window.event; 
                      var left=e.clientX-regBox.offsetLeft;
                      var top=e.clientY-regBox.offsetTop;
                document.onmousemove=function(event){
                       var  event=event||window.event; 
                       var  x=event.clientX-left;
                       var  y=event.clientY-top;
                       //边界检测
                      if(x<=0){
                        x=0;
                        
                      }
                      if(x>=1366-regBox.offsetWidth){
                        x=1366-regBox.offsetWidth;
                    
                      }

                      if(y<=0){
                        y=0;
                        
                      }

                      if(y>=600-regBox.offsetHeight){
                        y=600-regBox.offsetHeight;
                        
                      }
                    
                       regBox.style.top=y+"px";
                       regBox.style.left=x+"px";
                       //防止移动的过程选中字体  字体也是大盒子的一部分 
                       //所以移动的时候  选中之后 即使抬起鼠标也会移动

                       window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                }
         regMessage.children[0].onmouseup=function(){
                 document.onmousemove=null;
            }
            
            }
            

   </script>
 </body>
</html>