HTML CSS Javascript完成浮动登录窗口跟窗口移动

HTML CSS Javascript完成浮动登录窗口和窗口移动

【源码下载】（百度网盘）

【源码下载】（爱问知识人）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试登录</title>
<link href="css/login.css" rel="stylesheet" />
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/login.js" type="text/javascript"></script>
</head>

<body>
	<div id="opacityDiv"></div>
	<div id="divParent">    
        <div id="div0"><a href="#">登录</a></div>
        <div>你好！</div>
    </div>
    <div id="div1">
    	<div id="close"><span>×</span></div>
        <div><label>用户名</label><input id="user" align="left" width="20px"/></div>
        <div><label>密码：</label><input type="password" width="20px" /></div>
        <div><input type="submit" id="loginbt" value="登录" /><input type="reset" id="cancle" value="取消" /></div>
    </div>
    <!-- 由静寞小森http://blog.sina.com.cn/u/1586802947 奉献给大家，希望大家交流 -->
</body>
</html>

// JavaScript Document
$(document).ready(function() {
	
	$("body").css({height:$(window).height()-50,width:$(window).width()-50});
	
	var left_margin = ($("body").width() - $("#div1").width()) / 2;
	var top_margin = ($("body").height() - $("#div1").height()) / 2;
	var left_padding;
	var top_padding;
	var draggingBool = false;
	//alert("height"+width+";;width:"+height);
	
    $("#div0").click(function(){
		//$("#div0").hide();
		$("#div1").show(500);
		//$("#div1").css({"margin-top":height,"margin-left":width});
		$("#div1").offset({top:top_margin,left:left_margin});
		$("#opacityDiv").offset({top:0,left:0});
		$("#opacityDiv").css({height:$(window).height(),width:$(window).width()});
		$("#opacityDiv").css({opacity:0.4});
		$("#opacityDiv").show(500);
	});
	
	$("#close span").click(function(){
		$("#div1").hide(500);
		$("#opacityDiv").hide(500);		
	});
	
	//拖动登录窗口的效果
	$("#close").mousedown(function(e){
		draggingBool = true;
		left_padding = e.clientX - $("#div1").offset().left;
		top_padding = e.clientY - $("#div1").offset().top;
		//alert("left:"+left_margin+"\\"+"top:"+top_margin);
		$("#div1").css({opacity:0.2});
	});
	$(document).mouseup(function(){
		draggingBool = false;	
		$("#div1").css({opacity:1.0});
	});
	$(document).mousemove(function(e){
		if(!draggingBool)
           return;
		var x = e.clientX - left_padding;
		var y = e.clientY - top_padding;
//		alert(x+"^^^^^"+y);
		$("#div1").css({top:y,left:x});
	});
	
});

@charset "utf-8";
/* CSS Document */
body{
	text-align:center;
}
#divParent{
	width:980px;
}
#div1{
	position:absolute;
	display:none;
	height:100px;
	width:250px;
	background-color:#9F9;
	border:outset #06C 1px;
	z-index:1001;
	border-top-left-radius:3px;
	border-top-right-radius:3px;
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
}
#opacityDiv{
	display:none;
	z-index:100;
	position:absolute;
	 /* Firefox 3.6 */ 
	 background-image: -moz-linear-gradient(top, #00F, #F00); 
	 /* Safari & Chrome */ 
	 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #00F),color-stop(1, #F00)); 
	  /* IE6 & IE7 */ 
	 filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00F', endColorstr='#F00'); 
	 /* IE8 */ 
	 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00F', endColorstr='#F00')"; 
}
#cancle{
	margin-left:50px;
}
#close{
	text-align:right;
	height:15px;
	padding-right:1px;
	cursor:move;
}
#close span{
	cursor:default;
}

HTML CSS Javascript完成浮动登录窗口跟窗口移动

相关推荐