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

自动弹出、自动关闭;也可手动打开、关闭.........

写的不好,多多指教,呵呵`````

转载于:https://www.cnblogs.com/xxwgcg/articles/xxwgcg.html