这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了使用原生 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>
来源: http://www.phperz.com/article/17/0522/329857.html