JavaScript动态广告弹出框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border:1px red solid;
position: fixed;/*相对于浏览器窗体进行定位*/
right: 5px;
}
img{
float:left;
width:180px;
height:180px;
}
</style>
<script type="text/javascript">
/*两个定时器函数的差别：
* setTimeout(表达式,时间间隔)：经过一次时间间隔运行一次表达式----仅仅运行一次
setInterval(表达式。时间间隔)：每经过一次时间间隔运行一次表达式----运行无限次
setTimeout能够通过回调函数本身就ok了,在以下的代码中有所体现哦
*/
window.onload=function(){
init();
}
//设置div的bottom的值。是指div的底部距离它的最临近的父元素之间的距离
var bottomPosition=-550;
function init(){
//由于整个文档中有仅仅有一个div，全部通过这样的方式获取了存储图片的div了
var divNode = document.getElementsByTagName("div")[0];
//设置了bottom属性。使得開始载入的时候这个div是看不到的
divNode.style.bottom=bottomPosition+"px";
bottomPosition+=1;//没启动这个函数位置就会向上移动一个像素。
if(bottomPosition<50){
//间隔10毫秒启动这个函数
setTimeout(init,10);
}
}
//加入一个关闭button
function closeAdv(){
var divNode = document.getElementsByTagName("div")[0];
divNode.style.display="none";
}
</script>
</head>
<body>
<div>
<input onclick="closeAdv();"/>
<img src="3.jpg">胡哥是个传说胡哥是个传说胡哥是个传说胡哥是个传说
胡哥是个传说 胡哥是个传说，胡哥是个传说，胡哥是个传说
胡哥是个传说 胡哥是个传说。胡哥是个传说，胡哥是个传说
胡哥是个传说胡哥是个传说
胡哥是个传说 胡哥是个传说，胡哥是个传说。胡哥是个传说
</div>
</body>
</html>
注意：那里3.jpg该位置需要给她一个图片。
版权声明：本文博主原创文章，博客，未经同意不得转载。
JavaScript动态广告弹出框的更多相关文章
- JavaScript三种弹出框（alert，confirm和prompt）用法举例
http://blog.csdn.net/lucky51222/article/details/45604681 我们在做网页交互的时候往往需要用户在操作之前弹出一个提示消息框来让用户做一些点击才能继 ...
- bootstrap-js(六)弹出框
实例 为任意元素添加一小块浮层,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 初始化 由于性能的原因,工具提示和弹出框的 data 编程接口(data api)是必须 ...
- Bootstrap-Plugin：弹出框（Popover）插件
ylbtech-Bootstrap-Plugin:弹出框(Popover)插件 1.返回顶部 1. Bootstrap 弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip ...
- js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
- JavaScript插件——弹出框
(JavaScript插件——弹出框) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.htm ...
- easyui tree datagrid动态添加表头和表格数据，动态弹出框，修改和删除按钮
1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的 解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...
- JavaScript 实现简单的 弹出框关闭框
JavaScript 实现简单的 弹出框关闭框 知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素 代码献上: & ...
- 四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
- 练习：javascript弹出框及地址选择功能,可拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 过滤input框中的特殊字符
两种方式,我觉得是一样的效果,请看: var charFilter1 = function(str) { var pattern = new RegExp("[`~!@#$^&*() ...
- 关于spring获取webApplication.getBean多种途径和简单解释
ApplicationContext ac1 = new FileSystemXmlApplicationContext("com/spark/system/applicationConte ...
- Engine工具栏按钮的使用详解
转自原文 Engine自定义控件实现toolbar功能 Engine提供的工具条能够轻易实现各种操作,非常方便,可是不好的地方就是太死板了,toolbar的图标都不能改.因此需要自己做按钮做控件去实现 ...
- [Javascript Natural] Break up language strings into parts using Natural
A part of Natural Language Processing (NLP) is processing text by “tokenizing” language strings. Thi ...
- C语言实现字符串截取函数left、mid和right
作者:iamlaosong C语言字符串截取须要自己编程实现,只是.网络时代,自然不用自己从头写了.网上各种方法的实现代码已经多如牛毛了,这儿抄录一个感觉不错的备案. #include <std ...
- USB 3.0规范中译本 第6章 物理层
本文为CoryXie原创译文,转载及有任何问题请联系cory.xie#gmail.com. 6.1 物理层概览 物理层定义超高速总线的信号技术.本章定义超高速物理层的电气要求. 本节定义超高速组件之间 ...
- Visual Stdio 环境下使用 GSL （GNU Scientific Library）
Visual Stdio 环境下使用 GSL (GNU Scientific Library) 经測试.这里的方法不适用于VS2015. * 这篇文章有点过时了.建议从以下网址下载能够在 vs 环境下 ...
- c++ 成员函数指针
C++中,成员指针是最为复杂的语法结构.但在事件驱动和多线程应用中被广泛用于调用回叫函数.在多线程应用中,每个线程都通过指向成员函数的指针来调用该函数.在这样的应用中,如果不用成员指针,编程是非常困难 ...
- MVC4中AJAX Html页面打开调用后台方法实现动态载入数据库中的数据
之前一直用window.onload方法来调用js方法来实现,今天纠结能不能换个方法实现. 非常明显是能够的. 在html前台页面引用js代码例如以下 @Scripts.Render("~/ ...
- thinkphp中如何实现无限级分类？
thinkphp中如何实现无限级分类? 一.总结 1.数据表设计+递归算法 二.php实现无限级分类实例总结 1.数据库数据如下: 2.任务需求:给一个id,求自己和所有父亲. 3.实现代码如下:th ...