随滚动轴移动的窗口

平时大家浏览网页有时会出现小新闻或什么通知之类的，你在浏览当前页面时，它会一直跟着你，这个效果可以用jQuery实现哟。下面分析一下具体的实现过程吧
首先单击按钮来触发事件，弹出通过div设计出要弹出的窗口
<input type="button" id="btn1" value="弹出居左窗口"/>
	<input type="button" id="btn2" value="弹出居中窗口"/>
	<input type="button" id="btn3" value="弹出居右窗口"/>
	
	<div id="center" class="window">
		<div class="title">居中窗口:欢迎您！
		<!--在title中添加了一张图片用于关闭窗体（X图片）-
<img src="images/close.gif"/></div>
		<div class="content">
			我在中间，哇哈哈哈我是老大！
		</div>
	</div>
	
	<div id="left" class="window">
		<div class="title">居左窗口:欢迎您！<img src="images/close.gif"/></div>
		<div class="content">我现在在左边哟！</div>
	</div>
	
	<div id="right" class="window">
		<div class="title">居右窗口:欢迎您！<img src="images/close.gif"/></div>
		<div class="content">我现在在右边哟！</div>
	</div>
单单这样写的话，一点也不像窗口，所有增加一些样式吧
<style>
	.window{
		width:250px;
		background-color:#d0def0;
		padding:2px;
		margin:5px;
		position:absolute;
		overflow:auto;//小窗口的滚动条是自动添加的
		display:none;//窗口本身是隐藏的
	}
	.title{
		font-size:13px;
		padding:4px;
	}
	.title img{
		float:right;
		cursor:pointer;
	}
	.content{
		height:150px;
		background-color:#FFFFFF;
		font-size:14px;
		padding:4px;
	}
</style>

因为要通过jQuery动态控制弹出窗口的位置，所有在js文件中定义几个参数并且要初始化，得到相应的窗口的宽度高度还有弹窗的宽度和高度，还要获取出滚动轴 向下的偏移量和向右的偏移量，为了美观还可以设定一个延迟时间的参数
//窗口的宽度
	var windowWidth;
	//窗口的高度
	var windowHeight;
	//弹窗自身的高度
	var popHeight;
	//弹窗自身的宽度
	var popWidth;
//获得滚动条滚动的内容的高度
	var scrollTop;
	//获得滚动条滚动的内容的高度
	var scrollLeft;
//定义一个延迟的时间
	var timeOut;
通过方式初始化以上定义的参数
function init(){
		//获取窗口的高度和宽度
		windowWidth=$(window).width();
		windowHeight=$(window).height();
		//获取弹窗本身的高度和宽度
		//$(".window")找到弹出窗口
		popWidth=$(".window").width();
		popHeight=$(".window").height();
		//获取滚动条相对于顶端的位移量
		scrollTop=$(window).scrollTop();
		//获取滚动条相对于左端的位移量
		scrollLeft=$(window).scrollLeft();
}

当单击X图片时，关闭弹出窗口
function closeWindow(){
		//找到x图片
		$(".title img").click(function(){
		//parents找到祖先节点，会一直往上找，直到找到根节点，这里也可以用parents
			$(this).parent().parent().hide("slow");
		}); 
}
下面是弹出窗口的方法，主要是获取弹出窗口的位置(既弹出窗口的左上角的坐标)
//弹出居中窗口
	function popCenterWindow(){
		//两次操作，清空上一次的延迟
		clearTimeout(timeOut);
		//延迟执行下面的内容
		//第一个参数是函数名称，第二个参数是时间
		timeOut = setTimeout(function(){
			//进行参数的初始化   调用init方法
			init();
			//弹窗左上角坐标    X坐标=（窗口的宽度-弹窗的宽度）/2+scrollLeft
			var popX=(windowWidth-popWidth)/2;
			//弹窗左上角坐标    Y坐标=（窗口的高度-弹窗的高度）/2+scrollTop
			var popY=(windowHeight-popHeight)/2+scrollTop;
			//让弹窗显示到固定的位置----我们设定的位置
			//$("#center").css("left",popX).css("top",popY).show("slow");
			$("#center").animate({
				left: popX,
				top: popY
			}, 100).show("slow");	
		},300);
			//单击X图片时关闭
			closeWindow();
	}

//弹出居右窗口
	function popRightWindow(){
		//两次操作，清空上一次的延迟
		clearTimeout(timeOut);
		//延迟执行下面的内容
		//第一个参数是函数名称，第二个参数是时间
		timeOut = setTimeout(function(){
			//进行参数的初始化   调用init方法
			init();
			//弹窗左上角坐标    X坐标=窗口的宽度-弹窗的宽度-scrollLeft
			var popX = windowWidth - popWidth - scrollLeft;
			//弹窗左上角坐标    Y坐标=窗口的高度+scrollTop-弹窗的高度
			var popY = windowHeight + scrollTop - popHeight;
			//让弹窗显示到固定的位置----我们设定的位置
			//$("#right").css("left",popX).css("top",popY).show("slow");
			$("#right").animate({
				left: popX,
				top: popY
			}, 100).show("slow");	
		},300);
		closeWindow();
	}
	
	//弹出居左窗口
	function popLeftWindow(){
		//两次操作，清空上一次的延迟
		clearTimeout(timeOut);
		//延迟执行下面的内容
		//第一个参数是函数名称，第二个参数是时间
		timeOut = setTimeout(function(){
			//进行参数的初始化   调用init方法
			init();
			//弹窗左上角坐标    X坐标=0++scrollLeft
			var popX=scrollLeft;
			//弹窗左上角坐标    Y坐标=窗口的高度+scrollTop-弹窗的高度
			var popY=windowHeight+scrollTop-popHeight;
			//让弹窗显示到固定的位置----我们设定的位置
			//$("#left").css("left",popX).css("top",popY).show("slow");
			$("#left").animate({
				left: popX,
				top: popY
			}, 100).show("slow");	
		},300);
		
		closeWindow();
	}
	//关闭窗口
	function closeWindow(){
		//找到x图片
		$(".title img").click(function(){
			//parents找到祖先节点，会一直往上找，直到找到根节点
			$(this).parent().parent().hide("slow");
		}); 
	}

最后就是在jQuery中通过触发按钮动态去调用以上方法啦
<script language="JavaScript" type="text/javascript">
	//增加按钮的单击事件
	$(document).ready(function(){
		$("#btn2").click(function(){
			popCenterWindow();
			//调用弹出居中窗口方法
			$(window).scroll(function(){
				popCenterWindow();
			});
			
		});
		$("#btn3").click(function(){
			//调用弹出居右窗口方法
			popRightWindow();
			$(window).scroll(function(){
				popRightWindow();
			});
		});
		$("#btn1").click(function(){
			//调用弹出居左窗口方法
			popLeftWindow();
			$(window).scroll(function(){
				popLeftWindow();
			});
		});
	});
</script>