拖动的模拟框

最新推荐文章于 2022-10-14 20:06:17 发布

火星土豆饼

最新推荐文章于 2022-10-14 20:06:17 发布

阅读量154

点赞数

本文链接：https://blog.csdn.net/weixin_43412366/article/details/105027493

版权

思路：
1.点击弹出登录框和关闭登录框
2.在登录框首部按下鼠标，注册监听事件，得到鼠标在登录框中的坐标
3.按下鼠标移动是把登录框到左侧和上侧的距离赋值给文本框的left和top

<!DOCTYPE html>
<html>
<head lang="en">    
   <meta charset="UTF-8">    
   <title></title>
   <style>        
   .login-header {            
   width: 100%;         
   text-align: center;           
   height: 30px;            
   font-size: 24px;            
   line-height: 30px;        
   }                
   ul,        
   li,        
   ol,        
   dl,        
   dt,        
   dd,        
   div,        
   p,        
   span,        
   h1,        
   h2,        
   h3,        
   h4,        
   h5,        
   h6,        
   a {            
      padding: 0px;            
      margin: 0px;        
      }
   .login {            
      display: none;            
      width: 512px;           
      height: 280px;            
      position: fixed;            
      border: #ebebeb solid 1px;            
      left: 50%;            
      top: 50%;            
      background: #ffffff;            
      box-shadow: 0px 0px 20px #ddd;            
      z-index: 9999;            
      transform: translate(-50%, -50%);        
      }                
      .login-title {            
         width: 100%;            
         margin: 10px 0px 0px 0px;            
         text-align: center;            
         line-height: 40px;            
         height: 40px;            
         font-size: 18px;            
         position: relative;            
         cursor: move;        
         }                
      .login-input-content {            
         margin-top: 20px;       
         }                
      .login-button {            
         width: 50%;            
         margin: 30px auto 0px auto;            
         line-height: 40px;            
         font-size: 14px;            
         border: #ebebeb 1px solid;            
         text-align: center;        
         }                
       .login-bg {            
          display: none;            
          width: 100%;            
          height: 100%;            
          position: fixed;            
          top: 0px;            
          left: 0px;            
          background: rgba(0, 0, 0, .3);        
          }                
       a {            
          text-decoration: none;            
          color: #000000;        
          }                
      .login-button a {            
          display: block;        
          }                
      .login-input input.list-input {            
         float: left;            
         line-height: 35px;            
         height: 35px;            
         width: 350px;            
         border: #ebebeb 1px solid;            
         text-indent: 5px;        
         }                
     .login-input {            
         overflow: hidden;            
         margin: 0px 0px 20px 0px;        
         }                
      .login-input label {            
         float: left;            
         width: 90px;            
         padding-right: 10px;            
         text-align: right;            
         line-height: 35px;            
         height: 35px;            
         font-size: 14px;        
         }                
      .login-title span {            
         position: absolute;            
         font-size: 12px;           
         right: -20px;            
         top: -30px;            
         background: #ffffff;            
         border: #ebebeb solid 1px;            
         width: 40px;            
         height: 40px;            
         border-radius: 20px;        
         }    
   </style>
</head>
<body>    
   <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
   <div id="login" class="login">        
      <div id="title" class="login-title">登录会员            
          <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>        
      </div>        
      <div class="login-input-content">            
          <div class="login-input">                
            <label>用户名：</label>                
            <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">            
          </div>            
          <div class="login-input">                
            <label>登录密码：</label>                
            <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">            
          </div>        
       </div>        
       <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>    
    </div>    
    <!-- 遮盖层 -->    <div id="bg" class="login-bg"></div>
    <script>        
    //获取元素        
    var link = document.querySelector('#link');        
    var bg = document.querySelector('.login-bg');        
    var login = document.querySelector('.login');        
    var closeBtn = document.querySelector('.close-login');        
    var title = document.querySelector('.login-title');        
    //设置监听事件，点击弹出登录框，login,bg显示出来
    link.addEventListener('click',function(){                       
    	login.style.display = 'block';            
    	bg.style.display = 'block';        
    })        
   //设置监听事件，点击关闭按钮，login,bg隐藏起来
    closeBtn.addEventListener('click',function(){                
   	login.style.display = 'none';                
   	bg.style.display = 'none'                        
   })        
   //设置监听事件，当鼠标按下的时候，获取鼠标在login的坐标
   title.addEventListener('mousedown',function(e){                
   	var X = e.pageX - login.offsetLeft;                
   	var Y = e.pageY - login.offsetTop;                
  //设置监听事件，当鼠标移动的时候，把鼠标到login的x,y坐标给login的left和top
	    document.addEventListener('mousemove',move);                
	    function move(e){                    
	          login.style.left = e.pageX-X +'px';                    
	          login.style.top = e.pageY-Y +'px';                
	     }              	
 //设置监听事件，当鼠标谈起的时候把鼠标移动的事件删除
                 document.addEventListener('mouseup',function(){
                        document.removeEventListener('mousemove',move);                
            })     
})

火星土豆饼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖动的模拟框

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%;...
复制链接

扫一扫