首页
所有分类
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 相关文章推荐
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 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) decorator(1) 网页解析(1) 数组(5) 读取(1) bs4(1) translation(2) 数据保存(1) 查找算法(1) 分块(1)
You might like
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
JavaScript 对象模型 执行模型
2010/10/15 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
javascript常用功能汇总
2015/07/05 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
详细解析Python当中的数据类型和变量
2015/04/25 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
三只松鼠官方旗舰店：全网坚果销售第1
2017/11/25 全球购物
个人借款担保书
2014/04/02 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
城管年度个人总结
2015/02/28 职场文书
教师节主题班会方案
2015/08/17 职场文书