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 相关文章推荐
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
基于javascript的无缝滚动动画1
Aug 07 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权限分配的实现代码
2013/04/28 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
python批量同步web服务器代码核心程序
2014/09/01 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
python实现函数极小值
2019/07/10 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
计算机网络专业自荐书
2014/06/09 职场文书
预备党员个人总结
2015/02/14 职场文书
女方离婚起诉书
2015/05/18 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书