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" ...
随机推荐
- POJ 1195 二维树状数组
Mobile phones Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 18489 Accepted: 8558 De ...
- FK JavaScript之:ArcGIS JavaScript添加Graphic,地图界面却不显示
使用ArcGIS JavaScript,往地图中添加几个Graphic,基本是与官网示例代码一致.绘制的图形一闪而过之后,就没了 核心代码如下: iniToolBar: function () { t ...
- JS开发HTML5游戏《神奇的六边形》(二)
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...
- 安装redis时遇到zmalloc.h:50:31: 致命错误:jemalloc/jemalloc.h:没有那个文件或目录
参考博文,http://www.phperz.com/article/14/1219/42002.html 解决办法 make MALLOC=libc
- cms修改栏目单页样式错位调整
if (dt.Rows[0]["ClassTemplet"].ToString().Trim() == "") { rows_key.Style.Value = ...
- Windows2003中IIS的安全设置技巧
在Windows Server 2003中对于IIS的安全设置具有十分重要的意义,所以掌握IIS安全设置的六大技巧是一个网管员必备的基本技能.下面就是对IIS的安全设置的六大技巧. 技巧1.安装系统补 ...
- ThinkPHP3.2.3 自定义标签库的使用
ThinkPHP 3.2.3 手册中标签库驱动的地址是: http://www.kancloud.cn/manual/thinkphp/1859 标签库的地址是:http://www.kancloud ...
- Memcached 笔记与总结(9)Memcached 与 Session
一.Memcached 存储 Session 由于 Memcached 是分布式的内存对象缓存系统,因此可以用来实现 Session 同步:把 Web 服务器中的内存组合起来,成为一个“内存池”,不管 ...
- lr并发量和迭代的区别
1.并发量 并发量也就是同时运行的量.比如100个用户同时登录,那么并发量就是100.当然这100个用户可以进行参数化,也可以采用设置虚拟用户数(vuser). 2.迭代 迭代就是单个用户运行的次数. ...
- 并发队列ConcurrentLinkedQueue和阻塞队列LinkedBlockingQueue用法
在Java多线程应用中,队列的使用率很高,多数生产消费模型的首选数据结构就是队列(先进先出).Java提供的线程安全的Queue可以分为阻塞队列和非阻塞队列,其中阻塞队列的典型例子是BlockingQ ...