首页
所有分类
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 相关文章推荐
DWZ table的原生分页浅谈
Mar 01 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
JS前端笔试题分析
Dec 19 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 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
IP(1) update(2) 索引(8) 内置模块(1) 全局锁(1) 数据库卡死(1) 限流(2) 限速(1) 备份(2) tcp/ip(1)
You might like
PHP的简易冒泡法代码分享
2012/08/28 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
NodeJS整合银联网关支付（DEMO）
2016/11/09 NodeJs
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
Python 元类实例解析
2018/04/04 Python
Python any()函数的使用方法
2019/10/28 Python
Python for i in range ()用法详解
2020/09/18 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
python默认参数调用方法解析
2020/02/09 Python
Python处理PDF与CDF实例
2020/02/26 Python
Python unittest框架操作实例解析
2020/04/13 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
Spanx塑身衣官网：美国知名内衣品牌
2017/01/11 全球购物
怎样建立和理解非常复杂的声明？例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组？
2013/03/19 面试题
施工资料员岗位职责
2014/01/06 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫
关于vue-router-link选择样式设置
2022/04/30 Vue.js
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers