随滚动轴移动的窗口

原创 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
  • 下载

随滚动条移动的层

随滚动条移动的层 - 51windows.Net <!-- .div{ position: absolute; border: 2px solid red; background-co...

js 实现层随滚动条移动效果

随滚动条移动的层 - 51windows.Net .div{  position: absolute;  border: 2px solid red;  backgro...

层随滚动条移动

基于mfc的对话框编程中,实现控件随对话框大小自动缩放以及通过滚动条实现控件移动功能

1.在OnInitDialog中加入初始化垂直和水平滚动条的属性:     SCROLLINFO vinfo;     vinfo.cbSize = sizeof(vinfo);  ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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