<!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动态广告弹出框的更多相关文章

  1. JavaScript三种弹出框（alert，confirm和prompt）用法举例

    http://blog.csdn.net/lucky51222/article/details/45604681 我们在做网页交互的时候往往需要用户在操作之前弹出一个提示消息框来让用户做一些点击才能继 ...

  2. bootstrap-js(六)弹出框

    实例 为任意元素添加一小块浮层,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 初始化 由于性能的原因,工具提示和弹出框的 data 编程接口(data api)是必须 ...

  3. Bootstrap-Plugin：弹出框（Popover）插件

    ylbtech-Bootstrap-Plugin:弹出框(Popover)插件 1.返回顶部 1. Bootstrap 弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip ...

  4. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  5. JavaScript插件——弹出框

    (JavaScript插件——弹出框) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.htm ...

  6. easyui tree datagrid动态添加表头和表格数据，动态弹出框，修改和删除按钮

    1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的 解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...

  7. JavaScript 实现简单的 弹出框关闭框

    JavaScript 实现简单的 弹出框关闭框 知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素 代码献上: & ...

  8. 四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  9. 练习：javascript弹出框及地址选择功能,可拖拽

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [Angular] AuthService and AngularFire integration

    Config AngularFire, we need database and auth module from firebase. import {NgModule} from '@angular ...

  2. MySql 中的setAutoCommit方法

    引言 setAutoCommit方法用一句话说就是用来保持事务完整性.一个系统的更新操作可能涉及多张表,这个时候,就须要用多个Sql语句来实现,实际上我认为这个东西就是用来实现事务的. 当我们进行多条 ...

  3. Windows服务安装命令：

    sc create YY.SmsPlatform.RemoteDataCenter binPath= "E:\YY.SmsPlatform\YY.SmsPlatform.RemoteData ...

  4. Android LoaderManager与CursorLoader用法

    一.基本概念 1.LoaderManager LoaderManager用来负责管理与Activity或者Fragment联系起来的一个或多个Loaders对象. 每个Activity或者Fragme ...

  5. Redis学习笔记--Hash（五）

    Redis的数据是通过key-value的方式存储的,对于value的数据类型有字符串.Hash.list.set.sortedSet在redis命令语句中,语句是忽略大小写的,但是key是不可以忽略 ...

  6. 11.2 Android显示系统框架_android源码禁用hwc和GPU

    2. 修改tiny4412_Android源码禁用hwc和gpu(厂家不会提供hwc和gpu的源代码,没有源代码就没法分析了,因此在这里禁用该功能并用软件库实现)最终源码: git clone htt ...

  7. 10.13 android输入系统_多点触摸驱动理论与框架

    1.多点触摸驱动理论 驱动程序仅上报多个触点的位置就可以,是放大还是缩小由应用程序控制 对于多点触摸驱动在linux系统中有个输入子系统,其已经实现了open/read/write等接口 我们只需要实 ...

  8. js进阶 12-7 pageY和screenY以及clientY的区别是什么

    js进阶 12-7 pageY和screenY以及clientY的区别是什么 一.总结 一句话总结:pageY是距文件,screenY是获取显示器屏幕位置的坐标,clientY是页面视口. 没有滚动条 ...

  9. 12.2 linux USB框架分析（详细注册match匹配过程）

     首先我们先来简单说一说USB的框架,之后在来具体分析源码,以便加深理解!其实USB的框架比较像“平台总线.设备.驱动”的框架,也分为总线.设备.驱动三大块.其中总线驱动是已经由内核完成的,一旦接入u ...

  10. 算法练习--二分搜索哈希表-JS 实现

    1. 以哈希KEY的值建立二叉哈希表 2. 依据传入的哈希值使用二分法搜索 详细实现例如以下: function binarySearchTable(comp){ this.comp = comp; ...