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" ...
随机推荐
- linux笔记八---------文件查找
1.find文件查找指令 > find 目录 参数 参数值,参数 参数值..... > find / -name passwd //从系统根目录开始递归查找name=p ...
- js控制滚动条平滑滚动到制定位置
http://www.daixiaorui.com/read/92.html 滚动到顶部: $('.scroll_top').click(function(){$('html,body').anima ...
- Emule Xtreme Kid eD2K 设置
设置udp和tcp端口: 测试结果必须为通过,若不通过, 1.请将主机ip丢入路由器DMZ区(设置将以上端口与本机ip地址绑定) 2.在windows防火墙中加入以上端口允许通行项 测试结果: 其它一 ...
- vpn分类[转]
目前常用的几种移动拨号的VPN技术及优势和劣势1) WEB SSL优点:1.使用简单:每个终端用户不需要安装客户端,使用起来方便,不需要维护终端用户,通过IE直接来访问. ...
- ASP.NET MVC中在Action获取提交的表单数据方法总结 (4种方法,转载备忘)
有Index视图如下: 视图代码如下: <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Mas ...
- 20145334赵文豪 《Java程序设计》第4周学习总结
20145334赵文豪 <Java程序设计>第4周学习总结 教材学习内容总结 第六章知识点总结 1-继承共同行为:如果在程序设计上存在着重复,那就需要修改,可以吧相同的程序代码提升(pul ...
- 歐洲國家拓展其移動和IT服務業務
中興德國子公司與JOIN簽訂了一項綜合託管服務合同,在該合同中,公司將全面負責為盧森堡和比利時的JOIN核心網路提供網路運營,點對點無線網路報告,新品發佈和維護,還負責故障檢查.維修.測試和軟體升級. ...
- json对象与json字符串对象格式
var cStr = "{\"c\":\"{\\\"b\\\":\\\"000\\\",\\\"b2\\\&q ...
- mvc 扩展htmlhelper
using System.Web.Mvc; namespace System.Web.Mvc{ public static class HtmlExtend { public ...
- 【C51】UART串口通信
我们常需要单片机和其他模块进行通信,数据传输,常用的方式就是串口通信技术. 常用来 单片机<-->电脑, 单片机<-->单片机之间通信. 串行通信 versus 并行通信 并 ...