杨校老师课堂之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)咨询。
杨校老师课堂之JavaScript右下角广告弹框教程相关推荐
- 杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
JavaScript案例之跑马灯左右无缝连接 效果图: 思路: 1.先做界面 1.1 制作一个大盒子,进行存放整个图片及按钮区域 1.2 制作两个按钮和中间区域盒子 1.3 中间区域盒子中使用无序列表 ...
- 杨校老师课堂之CSDN博客查找博文汇总-目录
目录 1.面试 2.JavaWeb文件[图片]上传功能: 3.BaseServlet设计教程 4.富文本编辑器使用教程 5.下载Jar包教程 6.页面原型下载 7.Java连接数据库 ...
- 杨校老师课堂之WEB前端HTML
目录 1. 概念: 2. 快速入门: 2.1 语法: 2.2 代码: 3. 认识标签: 3.1 文件标签:构成html最基本的标签 3.2 文本标签:和文本有关的标签 3.3 图片标签: 3.4 列表 ...
- 杨校老师课堂之Java类与对象、封装、构造方法
杨校老师课堂之Java类与对象.封装.构造方法 本篇文章内容如下: 面向对象 类与对象 三大特征--封装 构造方法 教学目标 能够理解面向对象的思想 能够明确类与对象关系 能够掌握类的定义格式 能够掌 ...
- 杨校老师课堂之Spring框架面试题【开发工程师面试前必看】
1.spring 中都用到了哪些设计模式? 2.spring 中有哪些核心模块? 3.说一下你理解的 IOC 是什么? 4.spring 中的 IOC 容器有哪些?有什么区别? 5.那 BeanFac ...
- 杨校老师课堂之Maven下载与配置阿里云镜像
1. 下载 下载地址: https://archive.apache.org/dist/maven/maven-3/ 建议: 不要存放在C盘内: 不要存放在桌面 不要存放在有中文路径中或存放在带有特殊 ...
- 杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
JQuery案例 想使用Jquery ,必须要导入Jquery的库文件jquery-1.7.2.min.js: 下载地址: https://blog-static.cnblogs.com/files/ ...
- 杨校老师课堂之DeDeCMS织梦后台目录介绍篇
织梦后台目录认识 基本的目录结构 ../a 默认生成文件存放目录../data 系统缓存或其他可写入数据存放目录../dede 默认后台登录管理(可任意改名)../images 系统默认的部分系统需要 ...
- 杨校老师课堂之集群内SSH免密登录功能配置
SSH免密登录功能配置 1. 在主节点虚拟机内进行如下操作: [root@hadoop1 tmp]# ssh-keygen -t rsaGenerating public/private rsa ke ...
最新文章
- TensorFlow基本计算单元:代码示例
- 洛谷 P3128 [USACO15DEC]最大流Max Flow
- php datatype=quot;requirequot;,我的问题谁能帮我解决一下??
- Spring Cloud Alibaba - 12 使用Nacos的元数据实现金丝雀发布功能
- linux内核配置与编译
- java注释模板_Java注释模板设置
- [react] 使用Hooks要遵守哪些原则?
- 测试telnet安装成功 以及如何进入和退出telnet命令模式
- phpstudy配置oracle,phpStudy配置sql、oracle---博主摘录
- ssrs批量权限管理_管理SSRS安全性并使用PowerShell自动化脚本
- 那年学过的Java笔记一SE基础
- 我的PGA我作主----搞清楚什么是真正的PGA
- 聊聊Elasticsearch的BootstrapCheck
- Android NDK开发之旅12 JNI JNI引用
- 中国电子技术标准化研究院与Linux基金会战略合作签约仪式圆满落幕
- 简述冯诺依曼计算机体系结构
- IMAP 协议/命令
- php 图片外链限制,如何解决新浪微博图床限制图片外链的问题 | 骤雨打新荷
- Linux下解压分包文件zip(zip/z01/z02)【转】
- 检查xml格式是否正确