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" ...
随机推荐
- ASP.NET发布后,功能不响应
题记:稀奇古怪的错误,往往是由低级脑残错误产生的 ASP.NET网站,本地调试一切正常.部署到服务器后,结果登陆按钮就卡住了,点击就是没反应. 浏览器显示Internal Server Error 5 ...
- 使用UEditor 的时候,ajax注意使用同步的方法
使用UEditor 的时候,ajax注意使用同步的方法去读取后台数据,然后填写到前端的文本域当中.
- redis虚拟机模拟集群,节点,增加多端口命令
Redis启动多端口,运行多实例 使用redis在同一台机器上,启用多个端口,实现多个实例,完成集群的模拟实现. 启动多实例 redis默认启动端口为6379,我们可以使用 --port 来指定多个端 ...
- redis发布订阅
命令 : redis-cli打开一个客户端 Redis Psubscribe 命令订阅一个或多个符合给定模式的频道. 每个模式以 * 作为匹配符,比如 it* 匹配所有以 it 开头的频道( it.n ...
- 第一章 开始编写第一个jsp
第一章 搭好框架,需要tomcat服务器和jdk. JSP是Java Server Page的缩写,现在先让我们编写一个简单的jsp页面,看看jsp究竟能干什么? <%=new java.uti ...
- 导出excel时,以form方式提交json数据
今天在写项目时写到一个excel的导出,开始想用ajax请求后台后导出,但发现ajax会有返回值,而且ajax无法直接输出文件,而后台的excel导出方法已经封装好,不方便修改. 就改用了提交的方式f ...
- bzoj4514: [Sdoi2016]数字配对--费用流
看了一眼题目&数据范围,觉得应该是带下界的费用流 原来想拆点变成二分图,能配对的连边,跑二分图,可行性未知 后来看到另外一种解法.. 符合匹配要求的数要满足:质因子的个数相差为1,且两者可整除 ...
- 2016HUAS暑假集训题1 J - 迷宫问题
Description 定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, ...
- Linux服务器中木马(肉鸡)手工清除方法
由于自己也碰到过这种情况,刚好看到这篇文章,先转载过来.的确蛮有用的哦. 首先剧透一下后门木马如下: (当然这是事后平静下来后慢慢搜出来的,那个时候喝着咖啡感觉像个自由人) 木马名称 Linux.Ba ...
- 分享一个基于HTML5实现的视频播放器【转】
什么是hivideo? 最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放,只能放弃.最终决定还是自己封装 ...