编程 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.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