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>

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

Javascript 相关文章推荐
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
angular 服务随记小结
May 06 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
JavaScript实现打字游戏
Feb 19 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
You might like
一个多文件上传的例子(原创)
2006/10/09 PHP
php计算十二星座的函数代码
2012/08/21 PHP
初识Laravel
2014/10/30 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
详解python中的json的基本使用方法
2016/12/21 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
分析Python读取文件时的路径问题
2018/02/11 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
印度网上药店:1mg
2017/10/13 全球购物
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
英国假发网站:Hothair
2018/02/23 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
播音主持女孩的自我评价分享
2013/11/20 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
社团活动总结怎么写
2014/06/30 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
数学复习课教学反思
2016/02/18 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js