下面是基于JQuery实现页面定时弹出广告的攻略。
步骤一：引入JQuery库
首先需要在网站的HTML文件中引入JQuery库，可以使用CDN方式引入，也可以下载JQuery库文件之后进行引入。
<!-- 引入JQuery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
步骤二：创建弹出广告的HTML结构
在网站的HTML文件中创建弹出广告的HTML结构，可以根据需要进行样式的自定义。
<!-- 弹出广告的HTML结构 -->
<div id="popup-ad">
<div class="popup-close">关闭</div>
<a href="#"><img src="popup-ad.jpg"></a>
</div>
步骤三：添加样式
为弹出广告添加样式，如宽度、高度、位置等等。可以根据具体情况进行自定义。
#popup-ad {
position: fixed; /* 固定定位 */
z-index: 9999; /* 置顶显示 */
top: 50%; /* 居中 */
left: 50%; /* 居中 */
width: 500px; /* 宽度 */
height: 300px; /* 高度 */
margin-top: -150px; /* 居中 */
margin-left: -250px; /* 居中 */
background-color: #fff; /* 背景颜色 */
box-shadow: 0 0 10px rgba(0, 0, 0, .5); /* 阴影 */
display: none; /* 默认隐藏 */
}
.popup-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
步骤四：编写脚本
使用JQuery编写脚本，在指定时间后显示弹出广告。
$(function() {
setTimeout(function() {
$('#popup-ad').fadeIn();
}, 5000); // 延时5秒后显示弹出广告
$('.popup-close').on('click', function() {
$('#popup-ad').fadeOut();
});
});
上述脚本意思是：当页面加载完成后，等待5秒后弹出广告，并给关闭按钮绑定点击事件，点击后弹出广告消失。
示例一
下面是效果示例一：弹出广告的宽度为600px，高度为400px，时间间隔为10秒。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面定时弹出广告示例1</title>
<style>
#popup-ad {
position: fixed;
z-index: 9999;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin-top: -200px;
margin-left: -300px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
display: none;
}
.popup-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
.popup-image {
display: block;
margin: 50px auto 0;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
setTimeout(function() {
$('#popup-ad').fadeIn();
}, 10000); // 延时10秒后显示弹出广告
$('.popup-close').on('click', function() {
$('#popup-ad').fadeOut();
});
});
</script>
</head>
<body>
<div id="popup-ad">
<div class="popup-close">关闭</div>
<a href="#"><img class="popup-image" src="https://cdn.learnku.com/uploads/images/202202/14/iTpSkxfjfJ.png!custom.webp"></a>
</div>
</body>
</html>
示例二
下面是效果示例二：弹出广告的宽度为800px，高度为600px，时间间隔为15秒。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面定时弹出广告示例2</title>
<style>
#popup-ad {
position: fixed;
z-index: 9999;
top: 50%;
left: 50%;
width: 800px;
height: 600px;
margin-top: -300px;
margin-left: -400px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
display: none;
}
.popup-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
.popup-image {
display: block;
margin: 50px auto 0;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
setTimeout(function() {
$('#popup-ad').fadeIn();
}, 15000); // 延时15秒后显示弹出广告
$('.popup-close').on('click', function() {
$('#popup-ad').fadeOut();
});
});
</script>
</head>
<body>
<div id="popup-ad">
<div class="popup-close">关闭</div>
<a href="#"><img class="popup-image" src="https://cdn.learnku.com/uploads/images/202201/10/iQiXxHWdvH.png!custom.webp"></a>
</div>
</body>
</html>
以上是基于JQuery实现页面定时弹出广告的攻略，可以根据具体的需求进行修改和优化。感谢阅读！
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于JQuery实现页面定时弹出广告 - Python技术站
微信扫一扫 
支付宝扫一扫 