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

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sheevy/archive/2010/12/07/1898750.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍了一种使用JavaScript动态调整CSS定位层高度的方法，通过动画效果实现层的展开与收起，适用于网页底部浮动信息展示等场景。

其实很简单:css定位层一直在右下角,用js控制层的高度增减。

代码:

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
2 <title>测试</title>
3 <style type="text/css">
4 .divCss{bottom:0;display:block;height:25px;overflow:hidden;padding:0;position:fixed;right:20px;}
5 .contentCss{background:#666;height:200px;width:200px;}
6 .contentCssHeight{ }
7 .titleCss{width:200px;height:25px;line-height:25px;text-align:right;margin:0px;background:#999999;}
8 #close{cursor:pointer;}
9 </style>
10 <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
11 <script language="javascript" type="text/javascript">
12 $(function(){
13 //标题层的高度--提示打开或关闭
14 var titHeight=$("#ditTitle").height();
15 //内容层的高度
16 var conHeight=$("#divContent").height();
17 //打开或关闭
18 $("#close").toggle(function(){
19 //改变提示
20 $("#close").text("关闭");
21 //动画--一秒内消息层高度增加,top增加
22 $("#msgDiv").animate({height:titHeight+conHeight},1000,function(){
23 //展开后执行的函数
24 });
25 },function(){
26 //改变提示
27 $("#close").text("打开");
28 //alert(temp+" "+titHeight);
29 $("#msgDiv").animate({height:titHeight},1000,function(){
30 //关闭后执行的函数
31 });
32 })
33 //执行
34 var myTimer,i=8;
35 function starFun()
36 {
37 //触发click事件,显示
38 if(i==4){
39 $("#close").click();
40 }
41 //清除timeout,触发click事件,关闭层
42 if(i==0){
43 window.clearTimeout(myTimer);
44 if($("#close").text()!="打开")
45 $("#close").click();
46 }
47 myTimer=window.setTimeout(starFun,1000); i=i-1;
48 }
49 starFun() });
50 </script>
51 </head>
52 <body>
53 <div style="height: 1000px; background: #ccc;">测试Div</div>
54 <div id="msgDiv" class="divCss">
55 <div id="ditTitle" class="contentCssHeight titleCss"><span id="close">打开</span></div>
56 <div id="divContent" class="contentCss">这是一些测试内容</div>
57 </div>
58 <div style="height: 1000px; background: #C0C0C0;">测试Div</div></body></html>

转载于:https://www.cnblogs.com/sheevy/archive/2010/12/07/1898750.html