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();
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值