名企动态网站开发--js实现可拖动弹窗

最新推荐文章于 2017-01-06 14:35:55 发布

u013344815

最新推荐文章于 2017-01-06 14:35:55 发布

阅读量985

点赞数

分类专栏： Java web 文章标签： js JavaScript jQuery 可拖动弹窗弹窗

本文链接：https://blog.csdn.net/u013344815/article/details/51113434

版权

Java web 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

html文件

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/jquery-2.2.1.min.js"></script>
		<script src="js/index.js"></script>
		<script src="js/move.js"></script>
	</head>

	<body>
		<span class="show">
			登录
		</span>
		<div id="gray">

		</div>
		<div id="win">
			<div class="title" id="title">
				用户登录
				<a href="#">X</a>
			</div>
			<p class="top"><img src="img/new.png" width="40" height="40" align="absmiddle" /> 号外！我的DIY主题管理功能上线了！即刻起，登录360手机美化，可以将您制作的DIY主题保存到360美化云端，还可以使用我的DIY主题管理等高级功能！
			</p>
			<div id="lg">
				<form>
					<p>账号
						<input type="text" />
					</p>
					<p>密码
						<input type="password" />
					</p>

				</form>
				<p>
					<input type="checkbox" />下次自动登录<a href="#">忘记密码</a></p>
				<img src="img/but_bg1.jpg" />
			</div>

		</div>
	</body>

</html>

css文件

*{
	margin: 0;
	padding: 0;
}
#gray{
	width: 100%;
	height: 100%;
	background: gainsboro;
	position: absolute;
	top: 0;
	opacity: 0.5;
	display: none;
}
#win{
	width: 600px;
	height: 350px;
    background: white;
	position: absolute;
	left: 400px;
	top: 150px;
	display: none;
}
#win .title{
	width: 570px;
	height: 45px;
	color: white;
	background:#ff9933;
	font-family: "微软雅黑";
	line-height: 45px;
	padding-left: 30px;
	font-size: 18px;

}
#win .title a{
	color: white;
	text-decoration: none;
	float: right;
	margin-right: 5px;
	font-family: "微软雅黑";
	font-weight: 100;
}
#win p.top{
	
	font-size: 14px;
    font-family: "微软雅黑";
    color: #666;
    margin: 20px;
    line-height: 100%;
    
}
#win #lg{
	width:315px;
	height: 190px;
	margin: 15px auto 0;
	
}
#lg form p{
	font-size: 16px;
	font-family: "微软雅黑";
	margin-top: 5px;
	margin-bottom: 15px;
	margin-left: 5px;
}

	

#lg  form input{
    width: 260px;
    height: 35px;
    border: 1px solid #ddd;
    border-radius: 3px;
}
#lg p{
	margin-left: 43px;
	font-size: 14px;
	font-family: "微软雅黑";
}
#lg p a{
	float: right;
	margin-right: 10px;
}
#lg img{
	   margin-left: 43px;
       margin-top: 5px;	
}

js文件一（jQuery）

$(document).ready(function(){
	//登录按钮点击事件
	$('.show').click(function(){
		//灰色界面出现
		$('#gray').show();
		//弹窗出现
		$('#win').show();
		//调用location函数，进行初始定位
		location();
	})
	/*
	 * "x"关闭标志点击事件
	 * 灰色界面隐藏
	 * 弹窗隐藏
	 */
	$('#win .title a').click(function(){
		$('#gray').hide();
		$('#win').hide();
	})
	/*
	 * resize()函数，浏览器界面大小改变时调用
	 * location函数保证窗口一直在浏览器界面中间
	 */
	$(window).resize(function(){
		location();
	})
	/*
	 * 获取到窗口在浏览器中间位置时距离浏览器界面左边框的长度和上边界的长度来对窗口进行定位
	 */
	function location(){
	    var t=($(window).height()-$('#win').height())/2;
	    var w=($(window).width()-$('#win').width())/2;
	    $('#win').css({
	    	top:t,
	    	left:w
	    })
	}
})

js文件二--实现窗口可拖动

window.onload = function() {
	init(document.getElementById('title'));
}
var l = 0,
	t = 0,
	x = 0,
	y = 0;
var isOver = false;

function init(titleDom) {
	var thisDom = titleDom;
	var parentDom = thisDom.parentNode;
	thisDom.onmousedown = function(event) {
		var e = event || window.event;
		x = e.clientX;//鼠标箭头的横坐标
		y = e.clientY;//鼠标箭头的纵坐标

		l = parseInt(parentDom.offsetLeft);//窗口距浏览器左边界的距离
		t = parseInt(parentDom.offsetTop);//窗口距浏览器上边界的距离
		isOver = true;//防止出现拖动bug
		document.onmousemove = function(event) {
			if (isOver) {
				var e = event || window.event;//兼容不同浏览器
				var newLeft = l + e.clientX - x;//获得鼠标拖动后的左边距
				var newTop = t + e.clientY - y;//获得鼠标拖动后的上边距
				parentDom.style.left = newLeft + 'px';//设置鼠标拖动后的左边距
				parentDom.style.top = newTop + 'px';//设置鼠标拖动后的上边距
			}
		}
		document.onmouseup = function() {
			isOver = false;
		}
	}
}

u013344815

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
名企动态网站开发--js实现可拖动弹窗

js（jQuery）动态网站开发，可拖动弹窗效果--jQuery+html+css 用户登录 X 号外！我的DIY主题管理功能上线了！即刻起，登录360手机美化，可以将您制作的DIY主题保存到360美化云端，还可以使用我的DIY主题管理等高级功能！账号
复制链接

扫一扫