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.οnlοad=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 οnclick="closeAdv();"/><img src="3.jpg">胡哥是个传说胡哥是个传说胡哥是个传说胡哥是个传说胡哥是个传说  胡哥是个传说，胡哥是个传说，胡哥是个传说胡哥是个传说    胡哥是个传说，胡哥是个传说，胡哥是个传说胡哥是个传说胡哥是个传说胡哥是个传说    胡哥是个传说，胡哥是个传说，胡哥是个传说</div>
</body>
</html>

注意：这里面3.jpg的位置需要给她一个图片。

JavaScript实现动态广告弹出框相关推荐

【Web前端】JavaScript的三种弹出框：警告框、确认框、提示框
JavaScript有三种不同的弹出框:警告框.确认框.提示框 1.警告框:window.alert() 当需要确保用户收到某种信息时,可以使用警告框,用户必须点击警告框上的[确定]按钮,才能继续操作 ...
【JavaScript】input提示弹出框
一.先设计出提示框的样式,给出以下注意点: width: max-content; //提示框宽度可跟随文字的数量自动变化我尝试过使用 width: fit-content; 在Chrome浏览器中 ...
2021-05-27 右下角广告弹出框
思路: 关闭效果是通过设置其display样式为none实现的; 在此基础上设置两种关闭方式:延时器到时间关闭和鼠标点击关闭代码: css: #box {position: absolute;bot ...
JavaScript 如何让alert弹出框中的信息换行？
核心:使用转义字符. window.alert('L\nO\nV\nE'); 测试一下: 备注: 转义字符含义 \n 换行 \t 制表符 \b 空格 \r 回车 \f 换页符 \ 反斜杠 ' 单引 ...
JavaScript常用弹出框合集
JavaScript常用弹出框合集 JavaScript 有三种类型的弹出框:警告框.确认框和提示框. 警告框如果要确保信息传递给用户,通常使用警告框.当警告框弹出时,用户将需要单击"确定 ...
php右小角弹出框,HTML+Javascript实现右下角弹出框
效果视图: 分享代码:HTML> 右下角广告弹出框 display: block;border-radius: 4px;box-shadow: none;z-index: 999;padding ...
Bootstrap 弹出框（Popover）插件
弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstr ...
弹出框动态增加input输入框
欢迎关注微信公众号: 程序员小圈圈原文首发于: www.zhangruibin.com 本文出自于: RebornChang的博客转载请标明出处^_^ 弹出框动态增加input输入框最近项目上有 ...
Java程序员从笨鸟到菜鸟之（三十）javascript弹出框、事件、对象化编程
一:弹出框 JavaScript中有三种弹出框:警告(alert).确认(confirm)以及提问(prompt). 1.警告(alert) 在访问网站的时候,你遇到"咚"的一声 ...

JavaScript实现动态广告弹出框

JavaScript实现动态广告弹出框相关推荐

最新文章

热门文章