|
这篇文章主要为大家详细介绍了使用原生JavaScript实现弹出层登录拖拽功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在WEB开发过程中，总会遇到一些从未接触过的需求，总是想尽一切办法去研究，最终实现效果，在实现效果的那一刻成就感爆棚，有木有？
留言墙、弹出框等一些常见地方都有拖拽功能，方便用户体验嘛。
实现拖拽功能 ，三个事件 mousemove , mouseup ,mousedown, 偏移量(offsetLeft, offsetTop , offsetWidth ,offsetHeight)，窗口坐标位置(clientX ,clientY ) 以及获取可视区域方法的兼容性处理。
之前做的比较多的留言墙效果时写过的，这当时做的笔记，现在来整理整理。
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值等于(获取页面可视区域的宽度 - 登录框的高度) / 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
}
}
}
//实现拖拽功能 ，三个事件 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;
//不能移出可视区域
var left = e.clientX - oLeft;
var top = e.clientY - otop;
//左右
if (left < 0) { //如果盒子距左边的距离小于零，即超出
left = 0;
} else if (left > getInner().width - login.offsetWidth) { //可视区域的长度，减去盒子的长度 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">密 码
<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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。 | 
发表于 2016-12-5 17:25:59
