杨校老师课堂之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像素*/
top:; /*大盒子距离上方为0像素*/
}
#ad{ /*大盒子*/
width: 200px; /*大盒子的宽度*/
height:; /*大盒子的高度*/
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*/
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）咨询。
杨校老师课堂之JavaScript右下角广告弹框教程的更多相关文章
- js编写轮播图，广告弹框
1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...
- onload + setTimeout 用法，制作广告弹框效果
一般来说,只有 <body>,<img>, <link>, <script>,<frame>, <frameset>, < ...
- 杨老师课堂之JavaScript定时器_农夫山泉限时秒杀案例
预览效果图: 使用到的知识点: 定时器 setInterval(函数,毫秒):在指定的毫秒数后调用函数或执行一段代码 取消定时器 clearInterval:取消由setInterval设置的定时器 ...
- javascript中的弹框
大家都见过某度中的恶意广告,你关闭了又出来了!为何,JS来告诉你 效果猛戳此处 HTML <body> <h3 class="whiteColor">无法关 ...
- 【】关闭QQ右下角各种弹框
[]关闭QQ右下角弹框 一: 二: 超级会员设置过滤(屏蔽)广告后可以过滤哪些广告? 1.可以过滤QQ客户端好友聊天对话框右侧出现的Flash广告.左下角的文案广告: 如图: 2.可以 ...
- 【逆向工具】使用x64dbg+spy去除WinRAR5.40(64位)广告弹框
1 学习目标 WinRAR5.40(64位)的弹框广告去除,由于我的系统为x64版本,所以安装了WinRAR(x64)版本. OD无法调试64位的程序,可以让我熟悉x64dbg进行调试的界面. 其次是 ...
- JavaScript动态广告弹出框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 手动清除mac的广告弹框病毒 MacOSDefender
最近在浏览亚马逊, 京东的时候, 发现会自动弹出很多广告到浏览器, 其实是中了病毒MacOSDefender. 这个病毒非常烦人, 会在你浏览电商网页的时候拼命的打开广告页面, 而且还会弹出一些提示, ...
- dev右下角增加弹框提示信息
using System; using System.Drawing; using System.IO; using System.Threading; using System.Windows.Fo ...
随机推荐
- ORACLE sid,pid,spid总结
概念上:1.spid (system process id) 是操作系统层面的进程id .2.pid(process id) 这个是基于oracle的进程id个人理解为就是oracle给自己的进程 ...
- 2013 HTML5中国峰会演讲：Android上的HTML5:过去,现在和将来
转载请注明原文地址:http://blog.csdn.net/milado_nju ## 会议链接(应用和工具专场) http://2013.html5dw.com/main, 2013年8月10日 ...
- 新书《Ext JS 4.2实战》即将出版
目录: 第1章 Ext JS 4概述1.1 从Ext JS 4.0到4.071.2 从4.1到4.1.1a1.3 从4.2到4.2.11.4 如何选择版本1.5 基 ...
- FPGA学习笔记（一）Verilog语法基础
一.变量类型 ①数值 数值表示采用 <二进制位数>'<数值表示的进制><数值>的结构. 其中进制可以为b.o.d.h分别代表二.八.十.十六进制. 例如22'd0代 ...
- 【Android 系统开发】下载 编译 Android源代码 和 Android kernel源代码
下载Android源码简要流程 : a. 获取repo文件: curl http://commondatastorage.googleapis.com/git-repo-downloads/repo ...
- jsp中的tag与tld
转载自: http://www.cnblogs.com/fanzi2009/archive/2010/04/08/1707888.html 在jsp文件中,可以引用tag和tld文件. 1.对于ta ...
- 用curl采集需要登录的页面
登陆cookie存储至自定义目录 $cookie_dir = tempnam('.', 'cookie');curl_setopt($curl, CURLOPT_COOKIEJAR, $cookie_ ...
- "《算法导论》之‘树’"：二叉查找树
树的介绍部分摘取自博文二叉查找树(一).二叉查找树(二).二叉查找树. 1. 树的介绍 1.1 树的定义 树是一种数据结构,它是由n(n>=1)个有限节点组成一个具有层次关系的集合. 把它叫做“ ...
- 在SD/MMC卡上实现hive (Implement WinCE HIVE&ROM system on NAND or SD system )
本是个很简单的topic,但无奈的是很多客户都没有实现.所以只能写一个guide给客户,让他们依葫芦画瓢. 在SD卡上实现hive以及实现binfs最精髓的思想是,在boot stage 1依次加载s ...
- HBase 运维分析
问题分析的主要手段 1.监控系统:首先用于判断系统各项指标是否正常,明确系统目前状况 2.服务端日志:查看例如region移动轨迹,发生了什么动作,服务端接受处理了哪些客户端请求. 3.gc日志:gc ...