js漂浮广告
时间: 2023-07-16 19:13:49 浏览: 50
为了避免对用户体验造成干扰,现代浏览器已经禁止了浮动广告的显示。如果您想要实现一个类似的效果,可以考虑使用CSS实现固定位置的悬浮广告,或者使用JavaScript实现页面滚动时出现的悬浮广告。以下是一个简单的JavaScript代码示例,可以实现悬浮广告效果:
```javascript
// 获取广告元素
var ad = document.getElementById('floating-ad');
// 监听页面滚动事件
window.addEventListener('scroll', function(){
// 获取当前页面滚动距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 如果页面滚动距离超过了广告元素的位置,显示悬浮广告
if(scrollTop >= ad.offsetTop) {
ad.style.position = 'fixed';
ad.style.top = '0';
} else {
ad.style.position = 'static';
}
});
```
请注意,除非您有用户明确的授权,否则不要在您的网站上使用浮动广告。
相关问题
完整的js漂浮广告代码
以下是一个简单的JS漂浮广告代码:
```html
<div id="floating-ad">
<img src="https://example.com/image.jpg" alt="Floating Ad">
<button class="close-btn">X</button>
</div>
<script>
var ad = document.getElementById("floating-ad");
var closeBtn = ad.querySelector(".close-btn");
// 点击关闭按钮隐藏广告
closeBtn.addEventListener("click", function() {
ad.style.display = "none";
});
// 监听窗口滚动事件
window.addEventListener("scroll", function() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
ad.style.top = scrollTop + "px";
});
</script>
```
这个代码中,我们首先定义了一个带有图片和关闭按钮的广告容器,并为其设置了一个 id 属性。然后使用 JavaScript 获取该容器和关闭按钮元素,并为关闭按钮添加了一个点击事件监听器,在点击时隐藏广告容器。
接下来,我们为窗口滚动事件添加了一个监听器,以便在用户滚动页面时将广告容器“粘”在页面顶部。在监听器函数中,我们使用 `window.pageYOffset` 或 `document.documentElement.scrollTop` 来获取当前页面滚动距离,并将该值用于设置广告容器的 `top` 样式属性。
请注意,这只是一个简单的示例代码,可能需要根据您的具体需求进行适当修改。
javascript广告漂浮
以下是使用JavaScript实现广告漂浮效果的示例代码:
```javascript
// 获取广告元素
var ad = document.getElementById("ad");
// 设置广告的初始位置
var x = 0;
var y = 0;
// 设置广告的移动速度
var speedX = 2;
var speedY = 2;
// 定义函数来移动广告
function moveAd() {
// 更新广告的位置
x += speedX;
y += speedY;
// 获取窗口的宽度和高度
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
// 获取广告的宽度和高度
var adWidth = ad.offsetWidth;
var adHeight = ad.offsetHeight;
// 检查广告是否超出窗口边界
if (x + adWidth > windowWidth || x < 0) {
speedX = -speedX;
}
if (y + adHeight > windowHeight || y < 0) {
speedY = -speedY;
}
// 移动广告到新的位置
ad.style.left = x + "px";
ad.style.top = y + "px";
// 循环调用moveAd函数,实现动画效果
requestAnimationFrame(moveAd);
}
// 调用moveAd函数开始移动广告
moveAd();
```
请注意,上述代码中的"ad"是广告元素的id,你需要根据实际情况将其替换为你页面中广告元素的id。