好资源导航 » 文章资讯 » js实现百度登录窗口拖拽效果

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

2023-07-28 10:21:13 77

前言

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

代码







#box{
width:200px;
height:200px;
position:absolute;
left:100px;
top:100px;
background-color:red;
}

varoBox=document.getElementById("box") //鼠标按下事件 oBox.onmousedown=function(ev){ varev=ev||event vardifX=ev.clientX-oBox.offsetLeft vardifY=ev.clientY-oBox.offsetTop //紧接着需要马上去移动鼠标 oBox.onmousemove=function(ev){ //这里的ev和onmousedown里面的ev不一样 varev=ev||event varoBox_left=ev.clientX-difX varoBox_top=ev.clientY-difY oBox.style.left=oBox_left+"px" oBox.style.top=oBox_top+"px" } //当鼠标抬起时不要移动 oBox.onmouseup=function(){ oBox.onmousemove=null } }

总结

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

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐