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 asp.net 用json格式返回自定义对象
Apr 07 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
vue.js todolist实现代码
Oct 29 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 Javascript
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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
php缓冲输出实例分析
2015/01/05 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
一个js控制的导航菜单实例代码
2013/12/03 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
javascript常用的方法分享
2015/07/01 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
python引用DLL文件的方法
2015/05/11 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
Python绘制动态水球图过程详解
2020/06/03 Python
Python 实现简单的客户端认证
2020/07/29 Python
python 怎样进行内存管理
2020/11/10 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
结婚喜宴家长答谢词
2014/01/15 职场文书
高三体育教学反思
2014/01/29 职场文书
驾驶员培训方案
2014/05/01 职场文书
村委会贫困证明范本
2014/09/17 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
英文版辞职信
2015/02/28 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android