jQuery实现网页右下角弹出广告
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>测试</title>
5 <style type="text/css">
6 .divCss{
7 padding:0px;
8 height:25px;
9 overflow:hidden;
10 position:absolute;
11 }
12 .contentCss{
13 background:#cccccc;
14 width:200px;
15 height:200px;
16 }
17 .contentCssHeight{
18 }
19 .titleCss{
20 width:200px;
21 height:25px;
22 line-height:25px;
23 text-align:right;
24 margin:0px;
25 background:#999999;
26 }
27 #close{
28 cursor:pointer;
29 }
30 </style>
31
32
33
34 <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
35
代码
<script language="javascript" type="text/javascript">
$(function(){
//获取当前浏览器的宽度
var winWidth=$(window).width();
//获取当前浏览器的高度
var winHeight=$(window).height();
//标题层的高度--提示打开或关闭
var titHeight=$("#ditTitle").height();
//内容层的高度
var conHeight=$("#divContent").height();
//临时变量,存储内容层的高度
var temp = conHeight;
//alert(conHeight);
//加载时设置层的位置
$("#msgDiv").css({top:$(window).height()-$("#ditTitle").height(),left:$(window).width()-$("#ditTitle").width()-16});
//窗体改变大小时,重新设置
$(window).resize(function(){
//重新获取窗口的宽高
winWidth=$(window).width();
winHeight=$(window).height();
$("#msgDiv").css({top:winHeight-$("#ditTitle").height()-conHeight,left:winWidth-$("#ditTitle").width()-16});
});
$(window).scroll(function(){
//重新获取窗口的宽高
winWidth=$(window).width();
winHeight=$(window).height();
$("#msgDiv").css({top:winHeight-$("#ditTitle").height()-conHeight+$(window).scrollTop()});
});
//打开过关闭
$("#close").toggle(function(){
//改变提示
$("#close").text("关闭");
//还原内容层的高度
//alert(titHeight+conHeight);
//return;
$("#divContent").height(temp);
conHeight=temp;
//动画--一秒内消息层高度增加,top增加
//$("#msgDiv").height($(this).height()+temp);
$("#msgDiv").animate({top:winHeight-titHeight-conHeight+$(window).scrollTop(),height:titHeight+conHeight},1000,function(){
//展开后执行的函数
});
},function(){
//改变提示
$("#close").text("打开");
//alert(temp+" "+titHeight);
$("#msgDiv").animate({top:winHeight-titHeight+$(window).scrollTop(),height:titHeight},1000,function(){
//关闭后执行的函数
conHeight=0;
//设置内容层的高度为0
$("#divContent").height(0);
});
})
//执行
var myTimer,i=8;
function starFun()
{
//触发click事件,显示
if(i==4)
{
$("#close").click();
}
//清除timeout,触发click事件,关闭层
if(i==0)
{
window.clearTimeout(myTimer);
if($("#close").text()!="打开")
$("#close").click();
}
myTimer=window.setTimeout(starFun,1000);
i=i-1;
}
starFun()
});
</script>
105
106 </head>
107 <body>
108 <div id="msgDiv" class="divCss">
109 <div id="ditTitle" class="contentCssHeight titleCss">
110 <span id="close">打开</span></div>
111 <div id="divContent" class="contentCss">
112 这是一些测试内容</div>
113 </div>
114 </body>
115 </html>
116
自动弹出、自动关闭;也可手动打开、关闭.........
写的不好,多多指教,呵呵`````
