jQuery实现网页右下角弹出广告

最新推荐文章于 2021-06-05 09:20:53 发布

转载最新推荐文章于 2021-06-05 09:20:53 发布 · 224 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xxwgcg/articles/xxwgcg.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍了一个使用HTML、CSS及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

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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