随滚动轴移动的窗口

原创 2012年03月29日 19:51:13
平时大家浏览网页有时会出现小新闻或什么通知之类的,你在浏览当前页面时,它会一直跟着你,这个效果可以用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>

随 滚动条 移动 的 层

  • 2010年02月03日 09:35
  • 1020B
  • 下载

浏览器窗口大小改变时页面尾部 footer 可以以原来宽度随滚动条显示

今天在做前端页面时碰到一个问题,发现footer底部部分当改变浏览器窗口大小时(变小),底部的内容背景色看到的区域也变小了,滚动条向右拉动,右边留白了一部分,而左边的内容不能显示完整,就像下图这样: ...

div不随滚动条的移动而改变位置

  • 2012年01月12日 11:46
  • 1010B
  • 下载

悬浮窗口随滚动条的变化改变

无标题文档 href="dip.css" type=text/css rel=stylesheet> a:link {  color: #000000;  text-decoration: no...

层随滚动条移动

  • 2012年09月17日 14:32
  • 1KB
  • 下载

div滚动条随鼠标左右移动

鼠标移动 div内容滚动 - 柯乐义                  1. 横向滚动 1 Horizontal Scrolling             ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:随滚动轴移动的窗口
举报原因:
原因补充:

(最多只允许输入30个字)