jquery页面广告框架

大家可以下载附件以便学习，也可看下面的步骤！！！大家一起学习，一起进步！加油


首先，在html的body中写入以下标签

<div id="newnotice">
        <p><span class="title">标题</span> <span id="bts">
        <label class="button" id="tomin" title="最小化">-</label>
        <label class="button" id="tomax" title="最大化">+</label>
        <label class="button" id="toclose" title="关闭">x</label> </span></p>
        <div id="noticecon">
            你想要展示的东西！！！
        </div>
    </div>

其样式有css控制，可在css文件中写入，也可在html中写入。由个人爱好和习惯而定

  
#newnotice {
	/*display:none;*/
	width: 250px; /*height:22px;*/;
	border: solid #9BDF70 1px;
	background-color: #F0FBEB;
}
#newnotice p {
	font-size: 12px;
	margin: 1px;
	padding: 0px 2px 0px 5px;
	background-color: #C2ECA7;
	color: #666666;
	height: 20px;
	line-height: 20px;
}
#newnotice p .title {
	float: left;
}
#newnotice p #bts {
	display: block;
	float: right;
	width: 48px;
	height: 15px;
	/*border:#000000 solid 1px;*/
}
#newnotice p #bts .button {
	display: block;
	float: left;
	width: 15px;
	height: 15px;
	line-height: 15px;
	cursor: pointer;
	/*border:#000000 solid 1px;*/
}

#newnotice div {
	font-size: 12px;
	margin: 1px;
	padding: 0px 5px 0px 5px;
	background-color: #FFFFFF;
	color: #999999;
	height: 200px;
	line-height: 20px;
}

这是页面广告的核心部分，由“没剑(C-R团队之一)”开发。
在这段代码写入js文件之前，一定要先导入jquery.js！

/*任意位置浮动固定层*/
/*没剑(http://regedit.cnblogs.com) 08-03-11*/
/*说明：可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动*/
/*调用：
1 无参数调用：默认浮动在右下角
$("#id").floatdiv();

2 内置固定位置浮动
//右下角
$("#id").floatdiv("rightbottom");
//左下角
$("#id").floatdiv("leftbottom");
//左上角
$("#id").floatdiv("lefttop");
//右上角
$("#id").floatdiv("righttop");
//居中
$("#id").floatdiv("middle");

3 自定义位置浮动
$("#id").floatdiv({left:"10px",top:"10px"});
以上参数，设置浮动层在left 10个像素,top 10个像素的位置
*/
jQuery.fn.floatdiv=function(location){
	//ie6要隐藏纵向滚动条
	var isIE6=false;
	if($.browser.msie && $.browser.version=="6.0"){
		$("html").css("overflow-x","auto").css("overflow-y","hidden");
		isIE6=true;
	};
	$("body").css({margin:"0px",padding:"0 10px 0 10px",
		border:"0px",
		height:"100%",
		overflow:"auto"
	});
	return this.each(function(){
		var loc;//层的绝对定位位置
		if(location==undefined || location.constructor == String){
			switch(location){
				case("rightbottom")://右下角
					loc={right:"0px",bottom:"0px"};
					break;
				case("leftbottom")://左下角
					loc={left:"0px",bottom:"0px"};
					break;
				case("lefttop")://左上角
					loc={left:"0px",top:"0px"};
					break;
				case("righttop")://右上角
					loc={right:"0px",top:"0px"};
					break;
				case("middle")://居中
					var l=0;//居左
					var t=0;//居上
					var windowWidth,windowHeight;//窗口的高和宽
					//取得窗口的高和宽
					if (self.innerHeight) {
						windowWidth=self.innerWidth;
						windowHeight=self.innerHeight;
					}else if (document.documentElement&&document.documentElement.clientHeight) {
						windowWidth=document.documentElement.clientWidth;
						windowHeight=document.documentElement.clientHeight;
					} else if (document.body) {
						windowWidth=document.body.clientWidth;
						windowHeight=document.body.clientHeight;
					}
					l=windowWidth/2-$(this).width()/2;
					t=windowHeight/2-$(this).height()/2;
					loc={left:l+"px",top:t+"px"};
					break;
				default://默认为右下角
					loc={right:"0px",bottom:"0px"};
					break;
			}
		}else{
			loc=location;
		}
		$(this).css("z-index","9999").css(loc).css("position","fixed");
		if(isIE6){
			if(loc.right!=undefined){
				$(this).css("right","18px");
			}
			$(this).css("position","absolute");
		}
	});
};

使用这个代码调用上面那个框架，还有button的监听注册！

$("#newnotice").floatdiv("");
	$(window).load(function(){
		$("div[id=newnotice]").slideDown("slow");
	})
	$("label[id=tomin]").click(function(){
		$("div[id=noticecon]","div[id=newnotice]").slideUp();
	});

	$("label[id=tomax]").click(function(){
		$("div[id=noticecon]","div[id=newnotice]").slideDown();
	});

	$("label[id=toclose]").click(function(){
		$("div[id=newnotice]").hide();
	});