用JavaScript轻松创建动态广告弹窗

5星 · 超过95%的资源需积分: 32 15 浏览量更新于2024-09-14 收藏 2KB TXT 举报

在本文档中，我们将探讨如何使用JavaScript来实现在网页上创建动态广告弹窗功能。首先，我们从HTML结构开始，它定义了一个名为`winpop`的div元素，用于创建广告弹出窗口。这个div设置了固定的宽度（200px）、高度（0px），并将其定位为绝对布局，隐藏显示（display:none）。为了增加可交互性，我们还定义了两个子类`:title`和`.con`，分别对应弹窗的标题和内容区域，样式包括背景色、字体大小和颜色等。接下来，CSS部分设置了广告弹窗的基本样式，如边框、标题样式（黄色背景，粗体，居中显示）以及内容区域的样式（红色文本，带下划线，居中）。同时，还定义了一个`#silu`样式用于放置关闭按钮，它位于页面右侧，有文本装饰和特定的字体大小。 JavaScript部分的核心是`tips_pop()`函数，这是实现广告弹出的关键代码。该函数首先声明一个变量`msgPop`，然后使用`document`对象获取`winpop`元素，并设置其高度（例如，初始时为0，后续根据需求动态调整）。在这个函数中，我们可以通过动态修改`winpop`的高度来实现弹出和隐藏的效果。具体实现时，可能涉及以下几个步骤： 1. 当某个事件触发（如鼠标点击或页面滚动）时，调用`tips_pop()`函数。 2. 在函数内部，检查`winpop`的高度，如果为0，则将其高度设置为预期的弹出高度，例如通过设置`winpop.style.height = 'auto'`或`winpop.style.height = '90px'`（这里假设弹窗内容高度为90px）。 3. 可能还需要添加动画效果，比如使用JavaScript的`setTimeout()`函数实现平滑过渡。 4. 提供关闭按钮的交互逻辑，当用户点击关闭按钮时，再次调用`tips_pop()`并设置高度为0，隐藏弹窗。此外，文档中提到的`<script type="text/javascript">...</script>`标签中的内容可能是具体的函数实现细节，这部分代码可能会包含事件监听器、定时器或其他JavaScript控制广告弹窗行为的代码。为了完整展示，这部分代码应该包括在文档的主体部分，以便读者理解整个实现过程。这篇文档提供了如何使用JavaScript在网页上创建和管理一个简单的广告弹窗，包括HTML结构、CSS样式和关键JavaScript功能。通过结合这些元素，开发者可以构建出具有吸引力且易于操作的广告宣传窗口。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript实现网页右下角弹出窗口代码 - www.webdm.cn</title>
</head>
<style type="text/css">
#winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:none;}
#winpop .title { width:100%; height:22px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:center; font-size:12px;}
#winpop .con { width:100%; height:90px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center} /* http://www.webdm.cn */
#silu { font-size:12px; color:#666; position:absolute; right:0; text-align:right; text-decoration:underline; line-height:22px;}
.close { position:absolute; right:4px; top:-1px; color:#FFF; cursor:pointer}
</style>
<script type="text/javascript">
function tips_pop(){
var MsgPop=document.getElementById("winpop");
var popH=parseInt(MsgPop.style.height);//将对象的高度转化为数字
if (popH==0){
MsgPop.style.display="block";//显示隐藏的窗口
show=setInterval("changeH('up')",2);
}
else {
hide=setInterval("changeH('down')",2);
}
}
function changeH(str) {
var MsgPop=document.getElementById("winpop");
var popH=parseInt(MsgPop.style.height);
if(str=="up"){
if (popH<=100){

下载后可阅读完整内容，剩余2页未读，立即下载

海岸1127

粉丝: 0
资源: 1

用JavaScript轻松创建动态广告弹窗

jQuery右下角pop弹窗漂浮广告代码

IE弹窗类代码 打开网页弹出窗口、网站

25种经典的广告特效代码

JavaScript实现广告弹窗效果

JavaScript定时器制作弹窗小广告

js-实现广告弹窗通知公告带动画效果.zip

javascript实现倒计时并弹窗提示特效

js-广告弹窗

记事本广告弹窗网页模板

广告弹窗拦截源码-易语言

最新资源

IE弹窗类代码打开网页弹出窗口、网站