jquery可以移动的窗口

xyh...

于 2019-01-09 15:27:07 发布

阅读量315

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_40205570/article/details/86155389

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jquery可以移动的窗口

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		
		body {
			width: 100%;
			height: 100%;
		}
		
		html {
			width: 100%;
			height: 100%;
		}
		
		.drag {
			position: absolute;
		}
		
		.Pop-Box {
			width: 500px;
			border-top: 0;
			background: #F7F5F5;
			top: 200px;
			left: 400px;
		}
		
		.box-header {
			width: 500px;
			background: #428BCA;
			color: #fff;
			height: 30px;
			line-height: 30px;
			font-size: 18px;
			padding-left: 5px;
			box-sizing: border-box;
			cursor: move;
		}
		
		.box-header span {
			float: right;
			color: #FFF;
			width: 30px;
			height: 30px;
			background: #428BCA;
			text-align: center;
			line-height: 30px;
			cursor: default;
		}
		
		.box-header span:hover {
			background: #D9534F;
		}
		
		.box-main {
			height: 200px;
			border: 2px solid #428BCA;
			padding-top: 5px;
			text-align: center;
			line-height: 200px;
			font-size: 30px;
		}
		
		.hide {
			display: none;
		}
		
		.show {
			display: block;
		}
		
		#but {
			width: 100px;
			height: 50px;
			outline: none;
			border: none;
			background: aquamarine;
		}
		
		.box {
			width: 100%;
			height: 666px;
			background: rgba(0, 0, 0, 0.6);
			display: none;
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>

<body>
	<input id="but" type="button" value="打开窗口" />
	<div class="box">

		<div class="Pop-Box drag a">
			<div class="box-header">窗口
				<span class="fa fa-close close-box">X</span>
			</div>
			<div class="box-main">
				我是窗口
			</div>
		</div>
		<script>
			$("#but").click(function() {
				$(".box").toggle();
			});
			$(".box-header span").click(function() {
				$(".box").hide();
			});

			function move(className) {
				var isMove = false;
				var X, Y;
				$("." + className).click(function() {}).mousedown(function(e) {
					isMove = true;
					X = e.pageX - parseInt($("." + className).css("left"));
					Y = e.pageY - parseInt($("." + className).css("top"));
				});
				$(document).mousemove(function(e) {
					if(isMove) {
						var left = e.pageX - X;
						var top = e.pageY - Y;
						$("." + className).css({
							left: left,
							top: top
						});
					}
				}).mouseup(function() {
					isMove = false;
				});
			}
			move("a");
		</script>
</body>

效果图：
在这里插入图片描述

xyh...

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery可以移动的窗口

jquery可以移动的窗口&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"&gt;&lt;/
复制链接

扫一扫