`
Quen
  • 浏览: 2109 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
qwe0110
社区版块
存档分类
最新评论

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

jQueryCSS浏览器JavaScriptOO
阅读更多


初学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;
}

 

分享到：
strut2中分页的实现的初体验
评论
19 楼 tang_123_ 2010-09-08  
如果能添加一些注释就更好了！
18 楼 Quen 2010-07-21  
yangguo 写道
我是来看楼主同你条女打kiss的。

汗！！！！
17 楼 yangguo 2010-07-21  
我是来看楼主同你条女打kiss的。
16 楼 Quen 2010-07-20  
shadowsese 写道
貌似窗口出现的时候会有点左右抖动

恩！还是这位兄台细心！的却是这样，我也试过去找原因，不过都没解决！
不知道您能否修改一下，解决的告知一声，感激不尽！
15 楼 shadowsese 2010-07-20  
貌似窗口出现的时候会有点左右抖动
14 楼 人生如寄 2010-07-20  
我的火狐怎么可以用？
13 楼 Quen 2010-07-19  
wangyj0898 写道
感觉还是很不错的。学习·！


正如前面有人说的，入门、小儿科而已！对于jQuery，老觉得它的语法怪怪的，希望能在它还“热”的时间里面，学好并用好它！的确是很不错的插件！
不知，各位是否有同感？
12 楼 wangyj0898 2010-07-19  
感觉还是很不错的。学习·！
11 楼 JE帐号 2010-07-18  
好OO的JS啊.呵呵.
10 楼 docong 2010-07-18  
myzhijie 写道
火狐上好像关闭按钮不能用啊？

乱说
9 楼 anthon_lx 2010-07-17  
能不能做个 最小化网页了 那个提示 还在哪里。就是不让在页面里面 的
8 楼 qiren83 2010-07-17  
小玩意 入门的
7 楼 greateWei 2010-07-16  
有一个JQuery插件不错，实现类似功能，JGrowl
6 楼 Quen 2010-07-16  
另外，本人这几天也在“研究”jQuery下的树形视图（viewtree）的插件，特别是jstree+checkbox插件的值的获取和回显问题！
哎！小弟愚钝，至今还没有所突破！在网络上找到的，似乎都是外观上的一些东西！
不知给为是否有好的提示和建议！
小弟，讨教讨教！
5 楼 Quen 2010-07-16  
hahalzb 写道
火狐上关闭按钮确实不能用啊



真不好意思，各位！
本人上传上传上去的两个文件，第二个是稍加修整的！第二个（44.3 KB）修改过的是可以关闭窗口的！

由于本人的疏忽没有标明....实在抱歉！
4 楼 lzkyo 2010-07-16  
搜狗浏览器也不能关闭
3 楼 hahalzb 2010-07-16  
火狐上关闭按钮确实不能用啊
2 楼 qqliuyuxi 2010-07-16  
myzhijie 写道
火狐上好像关闭按钮不能用啊？

火狐上关闭按钮可以用啊，我试过？
1 楼 myzhijie 2010-07-16  
火狐上好像关闭按钮不能用啊？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics