首页
所有分类
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 操作表格实现代码(多种操作打包)
Mar 20 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
DWR中各种java方法的调用
May 04 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
JavaScript中concat复制数组方法浅析
Jan 20 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
Three.js(1) HBuilder(1) MutationObserver(1) tree shaking(1) kubernetes(1) 分布式追踪(1) group by(1) 条形码(1) Express(1) GPU(1)
You might like
php4的session功能评述（三）
2006/10/09 PHP
PHP个人网站架设连环讲(一)
2006/10/09 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
layui中的switch开关实现方法
2019/09/03 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
用python 制作图片转pdf工具
2015/01/30 Python
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python中生成Epoch的方法
2017/04/26 Python
Python语言描述最大连续子序列和
2017/12/05 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
Django分组聚合查询实例分享
2020/04/29 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
活动总结格式
2014/08/30 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
答谢词范文
2015/01/05 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
学校捐书活动总结
2015/05/08 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android