这篇文章主要为大家详细介绍了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></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>
总结
上面的代码就是仿百度登录窗口效果的实现，小伙伴们把代码复制到编译器上面看效果。希望对学习前端开发的小伙们有帮助。
以上就是本文的全部内容，希望大家多多支持脚本之家。
您可能感兴趣的文章: