欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

南宁小程序开发,挑战百日学习计划第43天(拖拉登录框的写法)

程序员文章站 2022-03-22 09:57:46
南宁小程序开发:www.zkelm.com今天的主题是做一个 移动的登录model框, 支持移动 拖放!1.首先先用HTML css 来设计一个登录界面, 确实要快的话就是直接引用layui 一样的框架就行, 简单粗暴,但是现在因为是学习,所以还是手打代码 自己diy一个,html代码如下:这里就不一一解析了,移动摩斯框....

南宁小程序开发:www.zkelm.com

今天的主题是做一个 移动的登录model框, 支持移动 拖放!

1.首先先用HTML css 来设计一个登录界面, 确实要快的话就是直接引用layui 一样的框架就行, 简单粗暴,但是现在因为是学习,所以还是手打代码 自己diy一个,
南宁小程序开发,挑战百日学习计划第43天(拖拉登录框的写法)
html代码如下:这里就不一一解析了,

<html>
	<head>
		<meta charset="utf-8">
		<title>移动摩斯框</title>
		<style>
			*{margin: 0;padding: 0;}
			.box{
				width:360px;
				height:180px;
				border:1px solid #aaa;
				margin:10px;
				box-sizing:border-box;
				position: absolute;
			}
			.title{
				height:40px;
				width: 100%;
				text-align:center;
				background-color: #ccc;
				font-size: 20px;
				line-height: 40px;
				font-weight:600;
				color:#333;
			}
			.content{
				width:100%;
				height:100px;
				background-color: #eee;
				padding: 10px;
				box-sizing:border-box;
			}
			.items{
				width:100%;
				height: 40px;
				margin-left: 10px;
			}
			input{
				height:24px;
				outline: none;
				width:68%
			}
			button{
				width:150px;
				height:30px;
				margin:5px auto;
				display: block;
				
			}
			.sub{
				width: 100%;
				height: 30px;
								
			}
			label{font-size: 16px;color:#444;}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="title">用户登录</div>
			<div class="content">
				<div class="items"><label for="n">账户:</label><input id="n" type="text"></div>
				<div class="items"><label for="p">密码:</label><input id="p" type="password"></div>
			</div>
			<div class="sub">
				<button class="submit">登录</button>
			</div>
		</div>
	</body>
</html>

完整的javascript控制代码如下:

<script>
		//添加mousedown事件
		document.getElementById("title").onmousedown=function(e){
			document.body.style="background:#eee;opacity:0.8";
			var box=document.querySelector(".box");
			   //先计算鼠标在page中得坐标
			   Eventleft=e.pageX-box.offsetLeft;
			   Eventtop=e.pageY-box.offsetTop;
			   //写移动事件
			   document.addEventListener("mousemove",move);
			   function move(e){	
				   //设置left  和Top则会产生移动
				   box.style.left=(e.pageX-Eventleft)+"px";
				   box.style.top=(e.pageY-Eventtop)+"px";
			   }
			   //绑定onmouseup  鼠标松开时候的事件
			   document.onmouseup=function(){
				   //移除监听事件!
				    document.removeEventListener("mousemove",move);
					document.body.style="";
			   }		  
			   		       
		}
		
	</script>

重点难点: 主要就是计算 box 与边框的距离。 因为书本的 mousemove 事件 只能计算出 e.pageX 和 e.pageY 的值,
当鼠标在不断得移动的时候,我们要不断的计算出left得值 并用 style.left= 鼠标移动的值.

南宁小程序开发,挑战百日学习计划第43天(拖拉登录框的写法)
好咧 ,教程介绍完毕, 不懂的欢迎加微信咨询,顺便宣传一下我们公司.团队

南宁企业oa开发:www.zkelm.com

本文地址:https://blog.csdn.net/zkelm/article/details/107524221