JavaScript 实现百度风格登录窗口拖拽功能

作者:窗边听雨时间:2026-10-23 16:49:03浏览:379

本文介绍如何利用 JavaScript 实现类似百度登录窗口的拖拽效果。通过监听鼠标按下、移动和抬起事件,结合元素绝对定位属性,动态计算并更新窗口位置,从而完成交互式拖拽功能的开发。

前言与背景

前言

在使用百度相关功能网页时,通常需要登录账号。你是否注意到百度登录窗口具备拖拽功能?下文将分享实现该效果的源码。

代码实现

代码实现


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

总结

总结

上述代码展示了仿百度登录窗口拖拽效果的实现方式。建议将代码复制到编译器中运行以查看实际效果,希望对前端开发学习者有所帮助。

以上就是本文的全部内容,希望大家多多支持本站。

作者最新文章