脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js窗口拖拽

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

 更新时间：2020年03月19日 12:39:01   作者：裕博  
这篇文章主要为大家详细介绍了js实现百度登录窗口拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

前言

在我们使用百度相关的功能网页的时候，我们要去登录账号。但是小伙伴们有没有关注过百度的登录窗口的拖拽效果呢？下面分享仿百度登录拖拽效果的源码

代码

<!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>

总结

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

以上就是本文的全部内容，希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论