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);
		}
	}
	//添加一个关闭按钮
	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实现动态广告弹出框

时间: 2024-10-08 19:35:00

JavaScript实现动态广告弹出框的相关文章

EasyUI+JavaScript 添加和修改弹出框按钮

写这篇文章只是想吐槽一下在做三个弹出框按钮的心酸史,为什么只写两个呢?因为之前看到过别人写了一个删除的,所以我只写剩下的两个吧!现在做的系统总是涉及到增删改的总会上面三个好看的按钮,下面一个好看的DataGrid. 添加和修改弹出框: 首先要加载我们做好的添加和编辑弹出框. <span style="font-size:14px;"><div id="addTemplate"> @* 加载添加流程对话框 *@ @{Html.RenderPar

bootstrap-js(六)弹出框

实例 为任意元素添加一小块浮层,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 初始化 由于性能的原因,工具提示和弹出框的 data 编程接口(data api)是必须要手动初始化的. 在一个页面上一次性初始化所有弹出框的方式是通过 data-toggle 属性选中 <!DOCTYPE HTML><html><head><link href="/stylesheets/bootstrap.min.css" rel

第 16 章 弹出框和警告框插件

学习要点: 1.弹出框 2.警告框 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. //基本用法 <button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="弹出框" data-content="这是一个弹出

ASP.NET中的几种弹出框提示

B/S不像C/S那样一个MessageBox就可以弹出提示框,不过可以通过js的“Alert”来弹出消息,或者通过一些变种的js方法.下面我给大家介绍几种,希望大家喜欢. 四种弹出框代码: protected void Message_Click(object sender, EventArgs e) { //第一种 Response.Write("<script language=javascript>alert('第一种弹出框');</" + "scri

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

js简单显示和隐藏div 01.<!DOCTYPE html> 02.<html> 03.<head> 04.<meta charset="UTF-8"> 05.<title>Insert title here</title> 06.<script type="text/javascript"> 07. window.onload=function(){ 08. document.g

Easyui+MVC实现动从一个动态弹出框进入另一个动态弹出框

高校平台进行中,本着一个在一个页面完成更多功能的宗旨,在遇到添加功能的多弹出框时,就需要从一个弹出框进入另一个弹出框,因为弹出框是动态的,就是说弹出框中的数据不定,是在Controller中根据传过来的数据动态拼写,完成后再弹出这个弹出框. View中加载部分视图: @*获取分数对话框*@ <form id="fmGetScore"> <div id="dlgGetScore" closed="true" class="

四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们的需求,下面我简单介绍一些 常见的四种提示弹出框(success,loading,error,warning),我分别用原生JavaScript和jQuery来介绍分享给各位博友! 一.首先介绍原生JavaScript来实现四种提示弹出框: 第一步:先看看html的建立 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

Axure 动态面板实现弹出框效果

今天在画原型图的时候遇到了个弹出框效果的实现,感觉挺有意思的,拿出来share下~ 如图:当我点击删除按钮后,如果用户选择删除,则要求要弹出一个对话框来让用户输入处理备注,如果不要删除,则点击取消: 首先描述下大致思路,我在页面上加上一个动态面板,然后为这个动态面板加上两个状态,一个是显示弹出框,另一个是隐藏弹窗口. 下面是弹出对话框的两个状态的设计: 隐藏状态的动态面板设置为空白,这样当切换到这个状态时就看不到任何东西. 然后为删除按钮添加用例: 注意,这里是当发生单击事件的时候弹出动态面板,

JavaScript中的三种弹出框

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>JavaScript中的三种弹出框</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 6 <script type="text/JavaScript"> 7 funct