编程 Javascript

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>

总结

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

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

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

- Author -

裕博

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

使用jQuery和PHP实现类似360功能开关效果

Feb 12 Javascript

js清理Word格式示例代码

Feb 13 Javascript

Javascript URI 解析介绍

Mar 15 Javascript

jQuery实现鼠标经过图片变亮其他变暗效果

May 08 Javascript

javascript特殊文本输入框网页特效

Sep 13 Javascript

深入理解Vue 单向数据流的原理

Nov 09 Javascript

详解Angular5 服务端渲染实战

Jan 04 Javascript

解决vue select当前value没有更新到vue对象属性的问题

Aug 30 Javascript

spring+angular实现导出excel的实现代码

Feb 27 Javascript

Vue项目中配置pug解析支持

May 10 Javascript

弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】

Aug 07 Javascript

VUE+node（express）实现前后端分离

Oct 13 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