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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
jquery不常用方法汇总
Jul 26 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
js实现简单的随机点名器
Sep 17 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
php 无限分类的树类代码
2009/12/03 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
JS继承 笔记
2011/07/13 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
python中__call__方法示例分析
2014/10/11 Python
Python中动态创建类实例的方法
2017/03/24 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
女子职高个人自荐书
2014/02/01 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
java设计模式--建造者模式详解
2021/07/21 Java/Android
js判断两个数组相等的5种方法
2022/05/06 Javascript