徐徐升起并淡淡消失的提示窗口

Akui123

于 2010-07-15 14:47:58 发布

阅读量140

点赞数

分类专栏： java开发文章标签： jQuery CSS 浏览器 JavaScript OO ViewUI

java开发专栏收录该内容

0 篇文章 0 订阅

订阅专栏

初学jQuery，觉得挺有意思的，然后就做了...这个！

试试窗口resize，也挺有意思的！

请给位多多指教！！

index.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>mymenu</title>
<link type="text/css" rel="stylesheet" href="menu.css" />
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body style="overflow:hidden">
	<div id="right" class="window">
		<div class="title">
			<img src="images/close.gif" alt="关闭" />
			温馨提示！
		</div>
		<div class="context">
			欢迎光临烟灰网（www.yanhui.com）!!
		</div>
	</div>
&nbsp;
</body>
</html>

javascript:

jQuery(document).ready(function(){				   
	var rightwin=jQuery("#right");
	var windowobj=jQuery(window);
	var cwinWidth=rightwin.width();
	var cwinHeight=rightwin.height();
	var browserWidth=windowobj.width();
	var browserHeight=windowobj.height();
	var scrollLeft=windowobj.scrollLeft();
	var scrollTop=windowobj.scrollTop();
	rightwin.mywin({left:"right",top:"bottom"},
		function(){
				rightwin.hide(1000);												  
		},{left:browserWidth-cwinWidth-5,top:browserHeight}
	).fadeOut(30000).dequeue();
});


/* name:mywin插件
 * 参数position：窗口显示的最终位置{left：XX，top：XX}
 * 参数hidefunc：关闭时调用的函数
 * 参数initPos： 窗口初位置{left：XX，top：XX}
 */
jQuery.fn.mywin=function(position,hidefunc,initPos){
	if(position && position instanceof Object){
		var positionleft=position.left;
		var positiontop=position.top;
		
		var left;
		var top;
		var windowobj=$(window);
		var currentwin=this;
		var cwinWidth=this.outerWidth(true);
		var cwinHeight=this.outerHeight(true);	
		
		var browserWidth;                        //浏览器宽度
		var browserHeight;                       //浏览器高度
		var scrollLeft;                          //
		var scrollTop;                           //
					
		//计算浏览器可视区域位置
		function getWinDin(){
			browserWidth=windowobj.width();
			browserHeight=windowobj.height();
			scrollLeft=windowobj.scrollLeft();
			scrollTop=windowobj.scrollTop();
		}
		//计算浏览器的左边距
		function callLeft(positionleft,browserWidth,scrollLeft,cwinWidth){
			if(positionleft && typeof positionleft=="string"){
				if(positionleft=="center"){
					left=(browserWidth-cwinWidth)/2;
				}
				else if(positionleft=="left"){
					left=0;
				}
				else if(positionleft=="right"){
					left=browserWidth-cwinWidth;
				}
			}
			else if(positionleft && typeof positionleft=="number"){
				top=positionleft;
			}else{
				left=(browserWidth-cwinWidth)/2;
			}
		}
		
		//计算浏览器的上边距
		function callTop(positiontop,browserHeight,scrollTop,cwinHeight){
			if(positiontop && typeof positiontop=="string"){
				if(positiontop=="center"){
					top=(browserHeight-cwinHeight)/2;
				}
				else if(positiontop=="top"){
					top=0
				}
				else if(positiontop=="bottom"){
					top=browserHeight-cwinHeight;
				}
			}
			else if(positiontop && typeof positiontop=="number"){
				top=positiontop;
			}else{
				top=(browserHeight-cwinHeight)/2;
			}
		}
		//移动窗口的位置
		function movewin(){
			callLeft(currentwin.data("positionleft"),browserWidth,scrollLeft,cwinWidth);
			callTop(currentwin.data("positiontop"),browserHeight,scrollTop,cwinHeight);	
			currentwin.animate({
							   	left:left-5,
								top: top
							   },2000);
		}
		
		//拖动窗口滚动条后重新调整窗口的相对位置
		var scrolltimeout;
		$(window).scroll(function(){
			if(!currentwin.is(":visible")){
				return;
			}
			clearTimeout(scrolltimeout);
			scrolltimeout=setTimeout(function(){
				getWinDin();	
				movewin();	
			},2000);
		});
		//浏览器窗口太小变化时重新调整窗口的相对位置
		$(window).resize(function(){
			if(!currentwin.is(":visible")){
				return;
			}
			getWinDin();
			movewin();
		});
		//点击关闭图标关闭窗口时间
		currentwin.children(".title").children("img").click(
			function(){
				if(!hidefunc){
					currentwin.hide(1000);
				}else{
					hidefunc();
				}
		});
		//初始化窗口的位置
		if(initPos && initPos instanceof Object){
			var initleft=initPos.left;
			var inittop=initPos.top;
			if(initleft && typeof initleft=="number"){
				currentwin.css("left",initleft);
			}else{
				currentwin.css("left",0);	
			}
			if(inittop && typeof inittop=="number"){
				currentwin.css("top",inittop);
			}else{
				currentwin.css("top",0);	
			}
			currentwin.show();
		}
		
		currentwin.data("positionleft",positionleft);
		currentwin.data("positiontop",positiontop);
		getWinDin();
		movewin();
		return currentwin;	
	}
}

css文件：

.window{
background-color:#D0DEF0;
width:251px;
pending:2px;
margin:2px;
position:absolute;
display:none;
}

.title{
font-size:10pt;
height:10px;
width:250px;
pending:2px;
}

.title img{
float:right;
cursor:pointer;
}

.context{
background-color:white;
height:200px;
width:250px;
border:2px solid #D0DEF0;
overflow:auto;
}

Akui123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
徐徐升起并淡淡消失的提示窗口

初学jQuery，觉得挺有意思的，然后就做了...这个！试试窗口resize，也挺有意思的！请给位多多指教！！ index.html:&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;&lt;title&gt;mymenu&lt;
复制链接

扫一扫