首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现百度登录框鼠标拖拽效果

Posted in Javascript onMarch 07, 2017

以百度的登录窗口为例，学习鼠标拖拽效果如何实现，拖拽范围限定以及登录窗口自动居中。学会如何制作弹出窗口特效，了解把元素设置为可拖拽的原理。

知识点：

1.掌握对可拖拽对话框的实现原理

2.了解元素如何触发脚本方法以及如何编写侦听事件

3. 学会设置元素在页面中居中和全屏

注意区别：

1.screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。
2.clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。
3.pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动。

鼠标事件：

鼠标事件1 - 在标题栏上按下（要计算鼠标相对拖拽元素的左上角的坐标，并且标记元素为可拖动）
鼠标事件2 -  鼠标移动时（要检测元素是否标记为可移动，如果是，则更新元素的位置到当前鼠标的位置【ps：要减去第一步中获得的偏移】）
鼠标事件3 - 鼠标松开的时候（标记元素为不可拖动即可）

效果：

js实现百度登录框鼠标拖拽效果

完整代码及注释：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<style type="text/css">
 *{
 margin: 0;
 padding: 0;
 list-style: none;
 }
 .main{
 width: 600px;
 height: 320px;
 margin: 0 auto;
 margin-top: 80px;
 margin-left: 400px;
 }
 .img{
 text-align: center;
 }
 .item1{
 margin-left: 115px;
 width: 600px;
 }
 .item1 li{
 float: left;
 width: 50px;
 }
 .text{
 width: 600px;
 margin-left: 80px;
 margin-top: 5px;
 }
 .text .txt{
 width: 450px;
 height: 30px;
 }
 .text .btn{
 width: 70px;
 height: 30px;
 cursor: pointer;
 }
 .item2{
 width: 600px;
 margin-left: 200px;
 margin-top: 30px;
 }
 .item2 li{
 float: left;
 margin-left: 10px;
 }
 .link{
 text-align: right;
 line-height: 30px;
 padding-right: 40px;
 }
 .logmove{
 width: 380px;
 height: auto;
 background: #fff;

 }
 .Box{
 width: 380px;
 height: auto;
 position: absolute;
 left: 100px;
 top: 100px;
 border: 1px solid #d5d5d5;
 z-index: 9000;
 background: #fff;
 display: none;
 }
 .title{
 height: 48px;
 line-height: 48px;
 color: #535353;
 background: #f5f5f5;
 padding: 0px 20px;
 font-size: 16px;
 border-bottom: 1px solid #efefef;
 cursor: move;
 user-select: none;
 }
 .title .closebtn{
 display: block;
 width: 16px;
 height: 16px;
 position: absolute;
 top: 15px;
 right: 20px;
 background: url("img/close_def.png") no-repeat;
 cursor: pointer;
 }
 .title .closebtn:hover{
 background: url("img/close_hov.png");
 }
 .content{
 padding: 15px 20px;
 }
 .Input{
 padding-top: 15px;
 }
 .txt1,.txt2,.Input{
 height: 40px;
 line-height: 40px;
 text-align: right;
 }
 .username,.password{
 width: 100%;
 height: 40px;
 margin: 0px;
 padding: 0px;
 border: 1px solid #c1c1c1;
 text-indent: 25px;
 outline: none;
 }
 .username{
 background: url("img/input_username.png") no-repeat 2px;
 }
 .password{
 background: url("img/input_password.png") no-repeat 2px;
 }
 .submit{
 width: 100%;
 height: 50px;
 background: #3b7ae3;
 border: none;
 font-size: 16px;
 color: #fff;
 outline: none;
 text-decoration: none;
 display: block;
 text-align: center;
 line-height: 50px;
 }
 .submit:hover{
 background: #3f81b0;
 }
 .mask{
 width: 100%;
 height: 100%;
 background: #000;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 8000;
 opacity: 0.4;
 filter: Alpha(opacity=40);
 display: none;
 }
</style>
<script type="text/javascript">
 window.onload=function(){
 //获取元素对象
 function g(id){
  return document.getElementById(id);
 }
 //自动居中 - 登录浮层 ( el = Element)
 function autoCenter(el){
  var bodyW = document.documentElement.clientWidth;//网页可视区域
  var bodyH = document.documentElement.clientHeight;
  var elW = el.offsetWidth;//登录框的宽度
  var elH = el.offsetHeight;
  el.style.left = (bodyW - elW) / 2 + 'px';//实现居中
  el.style.top = (bodyH - elH) / 2 + 'px';
 }
 //自动全屏 - 遮罩
 function fillToBody(el){
  el.style.width = document.documentElement.clientWidth + 'px';
  el.style.height = document.documentElement.clientHeight + 'px';
 }
 var mouseOffsetX = 0;//鼠标偏移量
 var mouseOffsetY = 0;
 var isDraging = false;
 //鼠标事件1 - 在标题栏上按下（要计算鼠标相对拖拽元素的左上角的坐标，并且标记元素为可拖动）
 g('title').addEventListener('mousedown',function(e){
  var e = e||window.event;
  mouseOffsetX = e.pageX - g('Box').offsetLeft;
  mouseOffsetY = e.pageY - g('Box').offsetTop;
  isDraging = true;
 })
 //鼠标事件2 - 鼠标移动时（要检测元素是否标记为可移动，如果是，则更新元素的位置到当前鼠标的位置【ps：要减去第一步中获得的偏移】）
 document.onmousemove = function(e){
  var e = e||window.event;
  var mouseX = e.pageX;//鼠标当前位置
  var mouseY = e.pageY;
  var moveX = 0;//浮层元素的新位置
  var moveY = 0;
  if(isDraging === true){
  moveX = mouseX - mouseOffsetX;
  moveY = mouseY - mouseOffsetY;
  //拖拽范围限定 moveX > 0 并且 moveX < (页面最大宽度 - 浮层的宽度)
  //  moveY > 0 并且 moveY < (页面最大高度 - 浮层的高度)
  var pageWidth = document.documentElement.clientWidth;//页面宽度
  var pageHeight = document.documentElement.clientHeight;
  var BoxWidth = g('Box').offsetWidth;
  var BoxHeight = g('Box').offsetHeight;
  var maxX = pageWidth - BoxWidth;
  var maxY = pageHeight - BoxHeight;
  moveX = Math.max(0,moveX);//实际上就是获得moveX的所有正数值，也就是规定范围的下限值
  moveX = Math.min(maxX,moveX);//实际上就是规定了moveX的上限值
  moveY = Math.max(0,moveY);
  moveY = Math.min(maxY,moveY);
  /*
  moveX =Math.min(maxX, Math.max(0,moveX));
  moveY =Math.min(maxY, Math.max(0,moveY));
  */
  g('Box').style.left = moveX + 'px';
  g('Box').style.top = moveY + 'px';
  }
 }
 //鼠标事件3 - 鼠标松开的时候（标记元素为不可拖动即可）
 document.onmouseup = function(){
  isDraging = false;
 }
 function showBox(){
  g('Box').style.display = 'block';
  g('mask').style.display = 'block';
  autoCenter(g('Box'));
  fillToBody(g('mask'));
 }
 function hideBox(){
  g('Box').style.display = 'none';
  g('mask').style.display = 'none';
 }
 g('log').onclick = function(){
  showBox();
 }
 g('close').onclick = function(){
  hideBox();
 }
 /*窗口改变大小时的处理
 1.保持登录浮层居中
 2.保持遮罩的全屏，使之不会出现滚动条
 */
 window.onresize = function(){
  autoCenter(g('Box'));
  fillToBody(g('mask'));
 }
 }
</script>
<body>
<div class="link"><a href="#" id="log">登录</a></div>
<div class="main">
 <div class="img"><img src="img/baidu.png" /></div>
 <div class="item1">
 <ul>
 <li><a href="#">新闻</a></li>
 <li><a href="#">网页</a></li>
 <li><a href="#">贴吧</a></li>
 <li><a href="#">知道</a></li>
 <li><a href="#">音乐</a></li>
 <li><a href="#">图片</a></li>
 <li><a href="#">视频</a></li>
 <li><a href="#">地图</a></li>
 </ul>
 </div>
 <div class="text">
 <br/>
 <input type="text" class="txt">
 <input type="button" value="百度一下" class="btn">
 </div>
 <div class="item2">
 <ul>
 <li><a href="#">百科</a></li>
 <li><a href="#">文库</a></li>
 <li><a href="#">hao123</a></li>
 <li><a href="#">更多>></a></li>
 </ul>
</div>
</div>
<div class="mask" id="mask"></div>
<div class="Box" id="Box">
<div class="logmove" id="logmove" onselect="return false">
 <div class="title" id="title">
 登录通行证<a href="#" class="closebtn" id="close"></a>
 </div>
</div>
<div class="content">
 <div class="Input">
 <input class="username" type="text" placeholder="手机/邮箱/用户名">
 </div>
 <div class="Input">
 <input class="password" type="text" placeholder="密码">
 </div>
 <div class="txt1">
 <a href="#">忘记密码</a>
 </div>
 <div>
 <a href="#" class="submit">登录</a>
 </div>
 <div class="txt2">
 <a href="#">立即注册</a>
 </div>
</div>
</div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js实现百度登录框鼠标拖拽效果

- Author -

Vampire-blog

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
js调用网络摄像头的方法
Dec 05 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 #Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 #Javascript
基于JavaScript实现图片剪切效果
Mar 07 #Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 #Javascript
js放到head中失效的原因与解决方法
Mar 07 #Javascript
Bootstrap媒体对象学习使用
Mar 07 #Javascript
angular十大常见问题
Mar 07 #Javascript
动态权限(1) Spring Security(2) AOP(2) promise(2) Kotlin(1) redis(3) 继承(1) 验证表达式(1) XDM(3) 构造函数(1)
You might like
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
JavaScript字符串对象slice方法入门实例（用于字符串截取）
2014/10/16 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
Python中暂存上传图片的方法
2015/02/18 Python
Python之用户输入的实例
2018/06/22 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
Stella McCartney官网：成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
关于读书的演讲稿400字
2014/08/27 职场文书
社区班子对照检查材料
2014/08/27 职场文书
法人委托书的范本格式
2014/09/11 职场文书
刑事案件上诉状
2015/05/23 职场文书
python_tkinter弹出对话框创建
2022/03/20 Python