原生js實現(xiàn)彈出層登錄拖拽功能

更新時間：2016年12月05日 17:25:59 作者：KoalaShane

這篇文章主要為大家詳細介紹了使用原生JavaScript實現(xiàn)彈出層登錄拖拽功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下

在WEB開發(fā)過程中，總會遇到一些從未接觸過的需求，總是想盡一切辦法去研究，最終實現(xiàn)效果，在實現(xiàn)效果的那一刻成就感爆棚，有木有？

留言墻、彈出框等一些常見地方都有拖拽功能，方便用戶體驗嘛。

實現(xiàn)拖拽功能，三個事件 mousemove , mouseup ,mousedown, 偏移量(offsetLeft, offsetTop , offsetWidth ,offsetHeight)，窗口坐標位置(clientX ,clientY ) 以及獲取可視區(qū)域方法的兼容性處理。

之前做的比較多的留言墻效果時寫過的，這當時做的筆記，現(xiàn)在來整理整理。

JavaScript代碼：

window.onload = function() {
 var btn = document.getElementsByClassName('login')[0]
 var close = document.getElementById('close');
 var login = document.getElementById('login');
 var top = (document.documentElement.clientHeight - 250) / 2; //top值等于(獲取頁面可視區(qū)域的寬度 - 登錄框的高度) / 2
 var left = (document.documentElement.clientWidth - 350) / 2;
 var open = document.getElementById('screen');
 btn.onclick = function() {
  login.style.display = 'block';
  login.style.left = left + 'px';
  login.style.top = top + 'px';
  open.style.display = 'block';
  open.style.width = getInner().width + 'px'; //彈出層的寬度等于可視窗口的寬度
  open.style.height = getInner().height + 'px';
 }
 close.onclick = function() {
  login.style.display = 'none';
  open.style.display = 'none';
 }
 window.onresize = function() {
   var top = (getInner().height - 250) / 2;
   var left = (getInner().width - 350) / 2;
   login.style.left = left + 'px';
   login.style.top = top + 'px';
  }
  //跨瀏覽器獲取可視窗口
 function getInner() {
  if (window.innerWidth != 'undefined') { //IE 不支持返回undefind
   return {
    width: window.innerWidth,
    height: window.innerHeight
   }
  } else {
   return {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
   }
  }
 }
 //實現(xiàn)拖拽功能 ，三個事件 mousemove , mouseup ,mousedown
 //clientX ,clientY 時鼠標指針相對于整個屏幕的坐標距離
 //offsetLeft, offsetTop 獲取當前元素相對于父元素的位置,在這里，父元素是document
 login.onmousedown = function(e) {
   stop(e); //阻止事件默認行為
   var e = e || window.event;
   var oLeft = e.clientX - login.offsetLeft; //login.offsetLeft 獲取盒子邊框到瀏覽器左邊框的距離
   var otop = e.clientY - login.offsetTop;
   document.onmousemove = function(e) { //移動的是整體的doucment
    var e = e || window.event;
    //不能移出可視區(qū)域
    var left = e.clientX - oLeft;
    var top = e.clientY - otop;
    //左右
    if (left < 0) { //如果盒子距左邊的距離小于零，即超出
     left = 0;
    } else if (left > getInner().width - login.offsetWidth) { //可視區(qū)域的長度，減去盒子的長度 offsetWidth
     left = getInner().width - login.offsetWidth;
    }
    //上下
    if (top < 0) {
     top = 0;
    } else if (top > getInner().height - login.offsetHeight) {
     top = getInner().height - login.offsetHeight;
    }
    login.style.left = left + 'px';
    login.style.top = top + 'px';
   }
   document.onmouseup = function() {
    document.onmousemove = null;
    document.onmouseup = null;
   }
  }
  //取消默認行為
 function stop(e) {
  var e = e || window.event;
  if (typeof e.preventDefault != 'undefined') {
   e.preventDefault(); //W3C
  } else {
   e.returnValue = false; //IE阻止事件默認行為
  }
 }
}

HTML代碼：

<div id="header">
 <div class="logo"><img src="images/logo.gif" alt="" /></div>
 <div class="member">個人中心
  <ul class="list">
   <li><a href="###">設置</a></li>
   <li><a href="###">換膚</a></li>
   <li><a href="###">幫助</a></li>
   <li><a href="###">退出</a></li>
  </ul>
 </div>
 <div class="login">登錄</div>
</div>

<div id="login">
 <h2><img src="images/close.png" alt="" class="close" id="close" />登錄</h2>
 <div class="user">用戶名<input type="text" name="user" class="text" /></div>
 <div class="pass">密&nbsp;&nbsp;碼 
  <input type="password" name="pass" class="text" /></div>
 <div class="button">
  <input type="button" class="submit" value="" /></div>
 <div class="other">注冊新用戶 | 忘記密碼</div>
</div>
<div id="screen"></div>
<script type="text/javascript" src="demo.js"></script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: