随滚动轴移动的窗口

原创 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>

浮层跟随滚动条移动的实现办法

用过淘宝的网页聊天工具就知道,当你拖动滚动条或者移动鼠标滑轮的时候,聊天窗口可以跟随页面一起移动。暂且不去追究淘宝是怎么实现的,现在我要列出两种解决办法 首先介绍第一种: 要设置html{widt...
  • wangleishi1
  • wangleishi1
  • 2012年03月09日 14:51
  • 3836

背景图片随滚动轴移动

body{ height: 2000px; //因为该页面没有滚动条所以给页面一个高度出现滚动条 color: #fff; //测试背景图片为黑色所以设置页面字体颜色为白色 } ...
  • github_37651381
  • github_37651381
  • 2017年03月24日 16:29
  • 231

广告条随滚动条的移动而移动

文章来源:蓝色理想跟随滚动条的图片#floater {         POSITION: absolute; VISIBILITY: visible; WIDTH: 10px; Z-INDEX: 1...
  • 21aspnet
  • 21aspnet
  • 2004年10月30日 17:58
  • 3158

如何设置跟随滚动条一起滚动的div

原理 使用css的定位属性position,设其值为fixed即可,该属性是将指定元素绝对定位于窗体,使用left,right,top和bottom属性来设置偏移于窗体原点的位置。 实例源码 ...
  • flygoa
  • flygoa
  • 2015年06月17日 10:25
  • 10026

JS方法实现div容器y轴滚动

div容器设置overflow:hidden隐藏滚动条后,容器中内容超出设定高度则不可见。 通过js方法,实现div垂直滚动条滚动到底部,以显示最新的内容。 var clientHeight ...
  • sofeien
  • sofeien
  • 2017年02月05日 14:57
  • 1260

Jquery几行代码解决跟随屏幕滚动DIV

jquery.text-effects #test { position: absolute; ...
  • smartsmile2012
  • smartsmile2012
  • 2014年01月15日 10:29
  • 10127

jquery控制div随滚动条滚动效果

jquery div随滚动条滚动效果 $(function () { $(window).scroll(function () { ...
  • smartsmile2012
  • smartsmile2012
  • 2015年02月03日 15:07
  • 6251

图片随滚动条滚动的代码

滚动广告 window.onload=initial; window.onscroll=move; var advObj; var advTop; var advLeft; ...
  • ASCEICY
  • ASCEICY
  • 2016年05月12日 09:56
  • 554

元素随浏览器滚动条拉动而移动位置的JS效果

    很多网站由于页面很长,右侧都有一个“回到顶部”的浮动链接,可以随着滚动条的拉动而移动位置,也就是说相对于浏览器的位置不变。    在页面添加一个JS方法:            functio...
  • jessica_wang365
  • jessica_wang365
  • 2010年04月12日 16:01
  • 4748

Android控件随手指的移动而移动

Android控件随手指的移动而移动 原理:这个不是很难,首先我们要给控件设置触摸监听时间,监听按下,移动,抬起等操作,然后在移动,按下里面分别获取按下的坐标,通过移动获取的坐标减去之前按下的坐标得...
  • xiayiye5
  • xiayiye5
  • 2018年01月23日 15:53
  • 42
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:随滚动轴移动的窗口
举报原因:
原因补充:

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