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.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
jquery 使用简明教程
Mar 05 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 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截取中文字符串的问题
2006/07/12 PHP
php在字符串中查找另一个字符串
2008/11/19 PHP
PHP 编写的 25个游戏脚本
2009/05/11 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
Python struct模块解析
2014/06/12 Python
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
Python查询IP地址归属完整代码
2017/06/21 Python
python调用百度语音REST API
2018/08/30 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python实现简单五子棋游戏
2019/06/18 Python
Python 实现一个计时器
2020/07/28 Python
应届毕业生就业自荐信
2013/10/26 职场文书
总经理岗位职责
2013/11/09 职场文书
精彩的推荐信范文
2013/11/26 职场文书
大学生求职推荐信
2013/11/27 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
现实表现证明材料
2015/06/19 职场文书
一文解答什么是MySQL的回表
2022/08/05 MySQL