前端笔记70——仿百度登录窗口拖拽效果

最新推荐文章于 2020-06-02 18:55:10 发布

野生杂学家阿博

最新推荐文章于 2020-06-02 18:55:10 发布

阅读量348

点赞数

分类专栏：前端文章标签：前端 JavaScript 仿百度登录窗口拖拽效果

本文链接：https://blog.csdn.net/chengxu_kuangrexintu/article/details/86693733

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

前言

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

代码

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

总结

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

野生杂学家阿博

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端笔记70——仿百度登录窗口拖拽效果

前言在我们使用百度相关的功能网页的时候，我们要去登录账号。但是小伙伴们有没有关注过百度的登录窗口的拖拽效果呢？下面分享仿百度登录拖拽效果的源码代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;st
复制链接

扫一扫

专栏目录