js广告弹窗
生活中我们经常遇到一些烦人的广告页面,比方说弹窗,悬浮等等各种广告。有的同事甚至都下一个屏蔽广告插件到浏览器上。这样就防止了广告的干扰。
但是我们学前端的必须是要知道广告弹窗这个做的过程,甚至是它的原理。
下面是我自己做的一个小案例,希望能够帮助到大家。当然,有不妥当的地方,还望多多指教。谢谢!
HTML代码部分:
<div id="popup">
<p>广告文字 广告文字 广告文字 </p>
<span id="dele">X</span>
</div>
CSS代码部分:
<style type="text/css">
*{margin: 0;padding: 0;}
html{width: 100%;}
body{width: 100%;position: relative;}
#popup{width: 310px;height: 144px;
background-color: yellowgreen; position: fixed;
left: 50%;top: 50%;margin-left: -155px;
margin-top: -72px;display: none;}
p{text-align: center; line-height: 144px;}
span{
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
background-color: red;
text-align: center;
cursor: pointer; }
</style>
JS代码部分:
<script type="text/javascript">
var Pop = document.getElementById("popup");
var Dele = document.getElementById("dele");
window.onload = function(){ Pop.style.display = "block"; Dele.onclick = function(){
Pop.style.display = "none"; setTimeout(function(){
Pop.style.display = "block";
},3000)
}
}
</script>
最终效果如下图所示:
js广告弹窗的更多相关文章
- 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
- jQuery实现广告弹窗
首先设置一个固定的窗口位于右下角,效果如下: 代码: jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下: <!DOCTYPE ht ...
- js右下角弹窗代码(实测好用)
实测好用的js右下角弹窗代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- jquery.cookie广告弹窗点击关闭后一天弹一次
jquery.cookie广告弹窗点击关闭后一天弹一次 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- JQ广告弹窗&随机抽奖————JQ
1.JQ广告弹窗 <div id="flo"> <img src="image.jpeg"> </div> <scri ...
- js解决弹窗问题实现班级跳转DIV示例
js解决弹窗问题实现班级跳转DIV 1.js代码如下: <%--实现班级跳转DIV--%> <div id="displayClassDiv" style=&q ...
- js写弹窗
1.先来看弹窗的模样 点击“弹出窗口”后会弹出下面窗口 2.下面是实现弹出窗口的代码,其中引入的jquery一般自己有,没有的话可以从网上下载.tanchuang.js和tanchuang.css写在 ...
- 一段简单的顶部JS广告
一段简单的顶部JS广告 <SCRIPT LANGUAGE="JavaScript"> ; ; images = new Array; images[] = new Im ...
- 原生Js_实现广告弹窗
广告样式当页面加载后5s刷新在右下角 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
随机推荐
- Eclipse tomcat先启动成功,然后再报超时原因之一
eclipse ,tomcat及环境设置都没错,通过上网搜资料发现是因为本机浏览器设置了代理,导致elipse启动tomcat时也启用代理,最后在eclipse中取消代理,成功启动,如下设置: Pre ...
- 演示一个导致ora-01555错误的场景
1创建一个undo表空间 2查看当前undo配置 3更该默认undo表空间 4确认更改的配置 5创建一张测试表 6模拟批量操作 7 查询2分钟前的数据 从这里可以到当查询2分钟前的数据时候,系统报出O ...
- Jackson转换对象为json的时候报java.lang.stackoverflowerror
无论在将一个对象转为json字符串的时候采用何种算法,如果你的对象的属性的类型不是基本类型或对应的引用类型,转换应该都不会就此结束,那么有一种方式可以导致这种转换陷入无限循环:将某个对象的属性设为对象 ...
- 在 Django 模板中遍历复杂数据结构的关键是句点字符
在 Django 模板中遍历复杂数据结构的关键是句点字符 ( . ). 实例二 mysit/templates/myhtml2.html修改如下 <!DOCTYPE html> <h ...
- Oracle中有个tkprof来格式化oracle的trace文件
1.MySQL日志文件系统的组成2.慢查询日志3.慢查询日志演示long_query_time : 设定慢查询的阀值,超出次设定值的SQL即被记录到慢查询日志,缺省值为10sslow_query_lo ...
- PHP的排序函数的总结
Sort 破坏索引 升序 值排序 Rsort 破坏索引 降序 值排序 Asort 保持索引 升序 值排序 Arsort 保持索引 降序 值排序 Ks ...
- Codeforces Round #375 (Div. 2) A B C D F
A 数轴上有三个人要到一个点去过年 使三个人走路距离的和最小 让两边的人都走到中间那个点即可 B 给出一个字符串 其中有_ ( ) 三种字符和英文字母 连续的英文字母是一个单词 括号对中不会套括号对 ...
- py操作mysql
1.操作mysql的标准流程 import pymysql conn = pymysql.connect(host = "127.0.0.1", port = 3306,user ...
- http://blog.csdn.net/ClementAD/article/category/6217187/2
http://blog.csdn.net/ClementAD/article/category/6217187/2
- linux添加ip、路由相关命令
1- Linux添加永久路由vi /etc/sysconfig/network-scripts/route-eth1ADDRESS0=192.168.10.0NETMASK0=255.255.255. ...