js实现百度登录窗口拖拽效果


Posted in Javascript onMarch 19, 2020

前言

在我们使用百度相关的功能网页的时候,我们要去登录账号。但是小伙伴们有没有关注过百度的登录窗口的拖拽效果呢?下面分享仿百度登录拖拽效果的源码

代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  #box{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 100px;
  top: 100px;
  background-color: red;
  }
 </style>
 </head>
 <body>
 <div id="box"></div>
 <script type="text/javascript">
  var oBox = document.getElementById("box")
  // 鼠标按下事件
  oBox.onmousedown = function(ev){
  var ev = ev || event
  var difX = ev.clientX - oBox.offsetLeft
  var difY = ev.clientY - oBox.offsetTop
  // 紧接着需要马上去移动鼠标
  oBox.onmousemove = function(ev){
   // 这里的ev和onmousedown里面的ev不一样
   var ev = ev || event
   var oBox_left = ev.clientX - difX
   var oBox_top = ev.clientY - difY
   oBox.style.left = oBox_left + "px"
   oBox.style.top = oBox_top + "px"
  }
  // 当鼠标抬起时不要移动
  oBox.onmouseup = function(){
   oBox.onmousemove = null
  }
  }
 </script>
 </body>
</html>

总结

上面的代码就是仿百度登录窗口效果的实现,小伙伴们把代码复制到编译器上面看效果。希望对学习前端开发的小伙们有帮助。

以上就是本文的全部内容,希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
js实现简单的验证码
Dec 25 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
js实现随机抽奖
Mar 19 #Javascript
js实现抽奖的两种方法
Mar 19 #Javascript
js实现九宫格抽奖
Mar 19 #Javascript
在Vue.js中使用TypeScript的方法
Mar 19 #Javascript
JS实现长图上下滚动效果
Mar 19 #Javascript
JavaScript实现简单计算器
Mar 19 #Javascript
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
You might like
php获取Google机器人访问足迹的方法
2015/04/15 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
jquery CSS选择器笔记
2010/03/29 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
Django实现图片文字同时提交的方法
2015/05/26 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Python class的继承方法代码实例
2020/02/14 Python
python接入支付宝的实例操作
2020/07/20 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
实习鉴定评语
2014/01/19 职场文书
党性观念心得体会
2014/09/03 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python