遮罩层窗口的移动

上一个遮罩层不能移动,这次增加了移动的效果~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.big-link{
				font-size: 70px;
				display: block;/*行内元素变成块状元素*/
				margin-top: 100px;
				color: blue;
				text-decoration: none;
			}
			.reveal-modal{
				position: absolute;
				width: 300px;
				top: 100px;
				left: 200px;
				background: white;
				padding: 30px 40px 34px; /* 上  左右  下 */
				border-radius: 10px;/*圆角*/
				box-shadow: 10px 10px 15px rgba(255,0,0,0.5);
				display: none;
			}
			#mymodal h1{
				background: red;
			}
			.mask{
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				background: gray;
				opacity: 0.6;/*透明度0.6*/
			}
		</style>
	</head>
	<body>
		<a href="#" class="big-link" onclick="s()">登录</a>
		<div id="mask" class="mask"></div>
		<div id="mymodal" class="reveal-modal">
			<h1>登录</h1>
			<p>
				你好,请输入个人信息
				<a href="javascript:m()">X</a>
			</p>
		</div>
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function s(){
			$("#mask").fadeIn(1000);
			$("#mymodal").fadeIn(1000);
		}
		function m(){
			$("#mask").fadeOut(1000);
			$("#mymodal").fadeOut(1000);
		}
		
		
		var a=false;//移动的标志位
		var x0,y0,left0,top0,xn,yn,x1,y1;
		$("#mymodal>h1").mousedown(function(e){
			a=true;//说明此时鼠标已经按下
			//获取鼠标的坐标
			x0=e.pageX;
			y0=e.pageY;
			//获取盒子的左/上边距
			left0=parseInt($("#mymodal").css('left'));
			top0=parseInt($("#mymodal").css('top'));
			console.log("x0:"+x0+",y0:"+y0+",left0:"+left0+",top0:"+top0);
		})
		$(document).mousemove(function(e){
			if(a){
				//获取当前鼠标的位置xn和yn
				xn=e.pageX;
				yn=e.pageY;
				//获取x轴与y轴移动的距离 
				x1=x0-xn;
				y1=y0-yn;
				//设置盒子的左边距和上边距
				$("#mymodal").css('left',left0-x1+'px');
				$("#mymodal").css('top',top0-y1+'px');
			}
		})
		$("#mymodal>h1").mouseup(function(){
			a=false;
		})
	</script>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值