杨校老师课堂之JavaScript右下角广告弹框教程
案例制作思路：
1、先制作界面
添加一个盒子包含一个按钮，使盒子绝对定位在右上角
添加一个大盒子，同理，将盒子居于左下角；其中内部包含一个顶端盒子和底部盒子
顶端盒子因为是属于大盒子内部的存在，所以宽度是占满整个大盒子的宽度，内部文本设置字体12号、居中显示、加粗
底部盒子因为也是属于大盒子内部的存在，所以宽度也是占满整个大盒子的宽度，内部文本设置字体12号、居中显示、加粗、行高等
2、经思考分析，因为页面是在打开后3秒中进行跳转，所以需要一个延迟定时器(SetTimeout(code,millisec); code是代表一个函数的引用，millisec代表定时的毫秒数) 。所以页面一打开是没有广告存在的，所以在大盒子的css中不存在高度的设置，另设置了隐藏显示的属性！
3、获取盒子的位置，并且设置其高度，进行接收。但是因为后的是一个对象，需要将对象进行转换成为数字。
4、如果该数字等于0 ，表示该盒子处于隐藏的状态，则将其通过display属性中的block块状 来显现出来。【此时在右下角已然存在盒子了，只不过高度为0，需要放大进行查看】
5、接下来，我们来操作盒子的高度问题。
解决方案：我们可以通过定时器去完成盒子的高度设置。
5.1.1、获取盒子
5.1.2、获取盒子的高度
5.1.3、判断接收到的参数是盒子高度递增或递减，若是递增参数，则需要判断盒子是否依然显示，若没有，将其递增显示，否则清除递增定时器。 若是递减参数，则需要判断盒子是否依然显示，若显示，将其递减到0，否则清除递增定时器并且隐藏盒子。
预览效果图：
Html代码：
<html> </head> <body> <div id="div"> <button onclick="tips_pop()">3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button> </div> <!--大盒子--> <div id="ad"> <!--顶端小盒子--> <div class="toppop"> <b>您有新的短消息！</b><span onclick="tips_pop()">X</span> </div> <!--底端小盒子--> <div class="bottompop">1条未读信息(...)</div> </div> </body> </html>
Css代码：
#div{ /*按钮盒子*/ position: absolute; /*大盒子的定位为绝对定位*/ right: 0; /*大盒子距离右方为0像素*/ top: 0; /*大盒子距离上方为0像素*/ } #ad{ /*大盒子*/ width: 200px; /*大盒子的宽度*/ height: 0; /*大盒子的高度*/ border: 1px solid #666;/*边框线为1像素 实线 灰黑色*/ position:absolute; /*大盒子的定位为绝对定位*/ bottom: 0px; /*大盒子距离下方为0像素*/ right: 0px; /*大盒子距离右方为0像素*/ display: none; /*不显示*/ } .toppop{ /*顶端盒子*/ width: 100%; /*宽度自动适应到最宽*/ height: 22px; /*上面的盒子高22像素*/ background: gold; /*背景颜色为金黄色*/ text-align: center; /*字体居中*/ font-size: 12px; /*字号为12像素*/ } .toppop span{ /*顶端盒子 中的 X*/ position: absolute; /*位置：绝对定位*/ right: 0; /*距离右侧边距为0*/ top: -1px; /*距离顶端距离为-1像素*/ color: #fff; /*“X”的颜色为白色*/ cursor: pointer; /*cursor 代表的是光标的类型；pointer代表 的是 一只小手*/ } .bottompop{ /*底端盒子*/ width: 100%; /*宽度自动适应到最宽*/ height: 88px; /*下面的盒子高88像素*/ font-size: 12px; /*字号为12像素*/ text-align: center; /*字体居中*/ font-weight: 900px; /*字体为粗体*/ color: #ff0000; /*颜色为红色*/ line-height: 80px; /*字体的行高为80像素*/
JavaScript代码：
<script type="text/javascript"> window.onload = function(){ // 页面加载 document.getElementById("ad").style.height = '0px' // setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 setTimeout("tips_pop()",3000); // 设置定时器（每过3秒执行一次tips_pop） } function tips_pop(){ var Msgpop = document.getElementById("ad"); // parseInt() 函数可解析一个对象,并返回一个整数 var popH = parseInt(Msgpop.style.height) // 将对象的高度转换成为数字 if(popH == 0){ //如果盒子的高度等于0 ，表示看不到 所以 处于一个隐藏状态 Msgpop.style.display="block"; //如果等于0，则去显示出来 show = setInterval("changeH('up')",3)// 设置定时器（显示的函数） }else{ hide = setInterval("changeH('down')",3)// 设置定时器（隐藏的函数） } } function changeH(str){ var Msgpop = document.getElementById("ad");//Msgpop 代表的是大盒子 var popH = parseInt(Msgpop.style.height);//将对象的高度转换成为数字 //popH 代表盒子的高度 [是数字] if(str == 'up'){ // 判断接受的参数是否是 up 如果是 则执行下方内容 if(popH <= 100){ //JavaScript toString()把数字转换为字符串: Msgpop.style.height = (popH + 4).toString() + 'px';//设置大盒子的高度 }else{ clearInterval(show); } } if(str == 'down'){ if(popH>=4){ Msgpop.style.height = (popH - 4).toString() + 'px';//设置大盒子的高度 }else{ clearInterval(hide); // 清除定时器（隐藏的函数） Msgpop.style.display = 'none'; //隐藏该盒子 div } } }
作者： 杨校
出处： http://www.cnblogs.com/xiaoxiao5016
分享是快乐的，也见证了个人成长历程，文章大多都是工作经验总结以及平时学习积累，基于自身认知不足之处在所难免，也请大家指正，共同进步。
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出, 如有问题， 可邮件（397583050@qq.com）咨询。
