jQuery悬浮广告是一种基于jQuery库实现的网页广告效果,它可以在用户滚动页面时保持在屏幕的某个固定位置,从而吸引用户的注意力。这种广告通常用于网站的主页、产品展示页等,以提高广告的曝光率和点击率。
以下是一个简单的jQuery悬浮广告示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery悬浮广告示例</title>
<style>
#floating-ad {
position: fixed;
bottom: 20px;
right: 20px;
width: 200px;
height: 100px;
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="floating-ad">
<p>这是一个悬浮广告</p>
<button onclick="closeAd()">关闭</button>
</div>
<script>
$(document).ready(function() {
// 确保广告不会超出屏幕边界
function adjustPosition() {
var ad = $('#floating-ad');
var windowHeight = $(window).height();
var adHeight = ad.outerHeight();
if (ad.offset().top + adHeight > windowHeight) {
ad.css('bottom', 'auto').css('top', windowHeight - adHeight - 20 + 'px');
} else {
ad.css('top', 'auto').css('bottom', '20px');
}
}
// 初始化位置
adjustPosition();
// 监听窗口滚动事件
$(window).scroll(function() {
adjustPosition();
});
// 监听窗口大小变化事件
$(window).resize(function() {
adjustPosition();
});
});
function closeAd() {
$('#floating-ad').remove();
}
</script>
</body>
</html>
z-index
属性,确保广告不会遮挡页面的主要内容。z-index
属性,确保广告不会遮挡页面的主要内容。通过以上方法,可以有效解决jQuery悬浮广告在实际应用中遇到的一些常见问题。
没有搜到相关的文章