jquery多个漂浮广告
基础概念
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。漂浮广告（Floating Ads）是一种网页广告形式，它会随着用户滚动页面而保持在屏幕的某个位置。
相关优势
- 简化 DOM 操作：jQuery 提供了简洁的语法来选择、操作和修改 DOM 元素。
- 事件处理：简化了事件绑定和解绑的过程。
- 动画效果：内置了多种动画效果，可以轻松实现广告的浮动效果。
- 跨浏览器兼容性：jQuery 处理了大部分浏览器的兼容性问题，使得代码在不同浏览器中表现一致。
类型
漂浮广告主要有以下几种类型：
- 固定位置广告：广告始终固定在屏幕的某个位置，如右下角。
- 跟随滚动广告：广告随着页面滚动而移动，但保持在屏幕的某个区域内。
- 弹出广告：点击按钮或链接后弹出的广告。
应用场景
漂浮广告常用于网站、博客、电商网站等，用于吸引用户的注意力，增加广告的曝光率。
示例代码
以下是一个使用 jQuery 实现多个漂浮广告的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Ads</title>
<style>
.ad {
position: absolute;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ccc;
z-index: 1000;
}
#ad1 { top: 10px; left: 10px; }
#ad2 { top: 50px; right: 10px; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="ad1" class="ad">Ad 1</div>
<div id="ad2" class="ad">Ad 2</div>
<script>
$(document).ready(function() {
function moveAds() {
$('.ad').each(function() {
var $ad = $(this);
var top = $ad.offset().top;
var left = $ad.offset().left;
var width = $ad.outerWidth();
var height = $ad.outerHeight();
if (top + height > $(window).scrollTop() && top < $(window).scrollTop() + $(window).height()) {
$ad.css({
position: 'fixed',
top: '10px',
left: left - $(window).scrollLeft() + 'px'
});
} else {
$ad.css({
position: 'absolute',
top: top - $(window).scrollTop() + 'px',
left: left - $(window).scrollLeft() + 'px'
});
}
});
}
$(window).scroll(moveAds);
$(window).resize(moveAds);
});
</script>
</body>
</html>可能遇到的问题及解决方法
- 广告位置不正确：可能是由于 CSS 样式或 JavaScript 计算错误导致的。检查 CSS 样式和 JavaScript 代码，确保广告位置的计算是正确的。
- 广告闪烁：可能是由于广告位置的频繁更新导致的。可以通过减少位置更新的频率或使用 CSS3 动画来优化。
- 兼容性问题：不同浏览器可能会有不同的表现。确保使用 jQuery 处理兼容性问题，并在不同浏览器中进行测试。
通过以上方法，可以实现一个简单的漂浮广告效果，并解决一些常见问题。
相关·内容
我使用谷歌广告管理器，并在我的网站上放置了一些广告。使用下面的代码，我可以确保空广告被折叠： .setCollapseEmptyDiv(true，true) 这个很好用。但我已经在每个广告的旁边放置了注释“广告”(因为法律要求)。问题是:如果没有广告投放，广告被折叠，“广告”这个词就会在页面上四处漂浮。它位于自己的DIV中(因为我想通过CSS准确地放置和显示它)。如果一个特定的Google广告被折叠，我如何隐藏另一个
浏览 11提问于2019-09-05得票数 1
回答已采纳
3回答
在上，我有一个浮动的横幅在屏幕底部的谷歌广告。-- GOOGLE AD CODE -->
广告应该漂浮在页面的底部，并在你滚动时停留在那里。然而，当我切换到我的iPhone，横幅只是停留在屏幕底部。
浏览 0提问于2015-06-17得票数 2
我试图让文本漂浮在我网页上的小图片周围，我已经尝试了我能想到的所有方法。我想在这里嵌入html和css，但我做起来有问题，抱歉。
(我将在应答时将url编辑掉，这样我就不会将其用作广告。)删除
浏览 8提问于2009-02-26得票数 0
回答已采纳
我正在编写www.rootologyhealth.com代码，我搞不懂为什么主页上的导航栏在Safari和火狐中的位置如此靠前，而在chrome中却看起来很完美。我已经做了我能做的所有工作来尝试诊断这个问题。我确信这是一个样式表问题，但是我使用的样式相对简单，不应该引起这个问题。
浏览 2提问于2012-08-21得票数 0
所以这段代码是直接从aframe 360图像源码。当我运行这段代码时，它是全屏显示的。我想知道是否有一种方法可以缩小这张图片，这样我就可以在一个网页上容纳多张图片。谢谢!<meta charset="utf-8"><meta name="description" content="360° Image - A-Frame">
<script src="assets/js/a
浏览 2提问于2019-09-17得票数 0
但是一旦我生成签名的APK文件并将其安装到我的手机中，我就遇到了这些问题：->在闪屏中，我应该看到一个StartAPP广告，但它说：“网页不可用”它看起来像它漂浮在屏幕上(我使用StartApp和Admob广告-我在屏幕上使用网页视图)。
浏览 49提问于2018-07-08得票数 0
我已经在页面结束标记之前加载了jQuery。<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">有一些广告代码，我需要运行在头标签。这通常很好，但是我想添加一个响应异常。}
else {console.log('run spec
浏览 1提问于2013-08-07得票数 2
回答已采纳
所有人。我只想问个问题。我正在使用Facebook营销API Java SDK。 .setName(adname) new AdCreativeObjectStory
浏览 0提问于2018-09-27得票数 0
2回答
在这里面，我有一个300 of正方形的div，它有一个.mpu类，可以显示广告。广告单元出现在文本段落之间，并应用以下样式： display: inline-block; width: 300px;}
因此，.mpu广告单元是漂浮在右边，但也突出2em从右手边的.wrap容器，因为负margin-right。容器内的文本在广告块周围整齐地流动，但是，当在广告块旁边插入图像标记时，当图
浏览 4提问于2015-05-27得票数 2
回答已采纳
1回答
如下所示，在我的网站中放置谷歌AdSense广告单元后，该广告单元是浮动的，并显示在页面的左上角，而不是在所需的div中。Google Ad Unit --->
</div>
这个问题只在桌面(不是移动设备)和Chrome(不是Safari)上显示，有没有办法强制广告定位在
浏览 5提问于2021-10-19得票数 0
1回答
嘿，我犯了一个非法的访问错误，用EntityManager客户端在上启动方法 sessionBean.create();
会话public void create() {}
浏览 3提问于2013-08-10得票数 0
我有一个广告网站，我创建的PHP和MySQL。表:广告、广告类型、用户和图像。广告具有一个或多个相关联的图像。用户可以发布多个广告。如何将数据导出到WordPress数据库？
浏览 0提问于2019-02-17得票数 1
回答已采纳
3回答
我们有多个网站下不同的域名，需要接收我们的横幅广告。我们有一个服务器应用程序，在PHP中，它返回一个随机生成的横幅广告的HTML。出于对客户端的考虑，我既不想使用iframe，也不想因为权重而包含jquery库--我也不想在所有域中重复代码。还有别的办法吗？也许有一种方法可以通过mod重写或web服务来实现？
浏览 1提问于2010-02-03得票数 1
回答已采纳
不幸的是，主题制作不再提供支持，所以我希望你们中的一个能在这里帮助我:D铬header根据body中的内容向左浮动。我猜这个函数在Firefox上是不起作用的： if( jQ
浏览 0提问于2012-11-30得票数 2
我使用谷歌本地广告在我的应用程序中加载多个定制模板广告，每一个都有自己的广告单元ID。
如果需要并行请求多个广告，则始终可以使用多个AdLoader对象。我在一个屏幕中并行地使用多个AdLoader对象。在播放服务广告版本18.0.0之前，我使用一个对象来确保广告是相关的，并且不接收重复的广告。自从升级到播放服务广告版本18以来，这已经停止工作，在18.1.0版中
浏览 0提问于2019-09-10得票数 2
回答已采纳
4回答
作为我问题的后续，在广告中为已删除的用户清除反向链接，我还有另一个相关但不同的问题。在AD中是否有类似的过程，允许您清理漂浮在您的域周围的这样的孤立的小岛屿发展中国家？
浏览 0提问于2010-11-04得票数 10
回答已采纳
我正在使用bootstrap模式窗口，我喜欢它。但是，我正在尝试改变关闭按钮的外观，这样当你点击“观看视频”时，我可以在这个中看到类似关闭按钮的东西。谢谢
浏览 2提问于2013-05-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
