文章/答案/技术大牛

发布

js广告悬浮

JavaScript广告悬浮是一种常见的网页广告形式，它允许广告内容在用户浏览网页时保持固定位置，通常位于页面的边缘或角落。以下是关于JavaScript广告悬浮的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方法。

基础概念

JavaScript广告悬浮利用JavaScript脚本控制广告元素的CSS样式，使其在页面滚动时保持在固定位置。这种技术通常涉及设置元素的position属性为fixed，并指定其在页面中的具体位置（如左上角、右下角等）。

优势

用户友好：广告悬浮可以减少用户滚动页面时的干扰，同时保持广告的可见性。
提高点击率：由于广告始终可见，用户更容易注意到并点击广告。
灵活布局：可以根据页面内容和设计需求调整广告的位置和大小。

类型

固定位置悬浮：广告始终固定在页面的某个位置。
跟随滚动悬浮：广告随着页面滚动而移动，但保持在视口内的某个相对位置。
弹出式悬浮：广告在特定事件触发时（如页面加载完成）弹出显示。

应用场景

电商网站：展示促销信息和特价商品。
新闻网站：推广相关新闻或专题报道。
社交媒体平台：推广用户可能感兴趣的内容或服务。

示例代码

以下是一个简单的JavaScript广告悬浮示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>广告悬浮示例</title>
    <style>
        #ad {
            position: fixed;
            bottom: 10px;
            right: 10px;
            width: 150px;
            height: 150px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            padding: 10px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div id="ad">
        <p>这是一个悬浮广告</p>
    </div>
    <script>
        // 可以在这里添加更多的JavaScript逻辑来控制广告的行为
    </script>
</body>
</html>

可能遇到的问题及解决方法

广告遮挡内容：广告可能会遮挡页面的重要信息。解决方法是通过CSS调整广告的位置或大小，或者在广告上添加关闭按钮。
性能问题：复杂的动画效果可能导致页面加载缓慢。优化JavaScript代码和CSS动画，减少不必要的重绘和回流。
兼容性问题：不同浏览器对JavaScript和CSS的支持可能有所不同。使用现代的JavaScript语法和CSS属性，并进行跨浏览器测试。
用户体验不佳：频繁弹出的广告可能会影响用户体验。合理控制广告的显示频率和时间，避免过度打扰用户。

通过以上方法，可以有效管理和优化JavaScript广告悬浮的效果，提升用户体验和广告效果。

页面内容是否对你有帮助？

有帮助

没帮助

JS中的交互式三环金星图？

javascript、reactjs、d3.js、venn-diagram、venn

有人知道在JS中有一个交互的(可悬浮的)3圈金星图库吗？我需要扩大面积。我也将尝试：

浏览 27提问于2022-01-06得票数 1

1回答

AnyLogic模拟用户界面屏幕中的工具提示/鼠标操作文本？

java、anylogic

我想知道是否可以在AnyLogic模拟中实现工具提示(鼠标在上面)文本，例如，模拟用户可以将鼠标悬停在Radio或Edit上，并获得与上下文相关的帮助消息。如果这是可行的，一个特定于任何逻辑的例子将是非常感谢的。

浏览 12提问于2020-05-08得票数 0

回答已采纳

1回答

jQuery库与原型框架冲突

jquery、prototypejs、conflict

第一个是：第二个JavaScript是最新的jQuery。我需要这个来创建一些页面上的动画。当两个JavaScript文件都在页面中时，我的悬浮卡片停止工作。为什么jQuery会停止prototype.js文件的工作？我该如何解决这个问题，这样我才能同时使用这两个工具呢？

浏览 2提问于2011-10-25得票数 0

回答已采纳

1回答

悬浮状态不会被js刷新。

javascript、jquery、css

我在我的网站上有颜色开关，我是js和jquery的新手，但是我写了它的code.Simply，它改变了css信息来改变颜色和背景色，以及它们的悬停。jQuery(document).ready(function($) { document.querySelectorAll('*').

浏览 5提问于2020-11-15得票数 0

回答已采纳

2回答

我需要在广告标记中提供mraid.js脚本吗？

mraid、smaato

我看到很多MRAID广告的例子都是这样开头的这个脚本是否总是在所有兼容MRAID的设备上都可用，或者我需要将SRC属性设置为位于互联网上某处的真实mraid.js？

浏览 5提问于2014-11-04得票数 2

1回答

如何在被黑客攻击的waitForKeyElements版本中修复无限循环？

javascript、firefox、greasemonkey-4

version 2.0.0// @grant

浏览 3提问于2018-05-14得票数 0

回答已采纳

1回答

允许广告拦截插件为访问者屏蔽整个div，这样网站看起来就不会半途而废？

css、html、ads、adblock

这听起来适得其反，但事实并非如此:我有一个只包含广告的div元素-这基本上只是给广告一些填充，并用一个漂亮的边框/框包围它。有没有这样的广告拦截器在div中寻找的关键字，我可以用来确保如果广告被阻止，整个div是不可见的？感谢您的帮助或建议。

浏览 0提问于2012-08-08得票数 1

回答已采纳

2回答

每页有多个广告？

html、ads、adsense

我刚开始使用Adsense，我想知道我在我的页面上放置多个广告的方式是否正确。我把adsbygoogle.js放在页面的页脚，然后把<ins class"adsbygtoogle">放在我想要广告的任何地方。这是正确的方法还是有更好的方法？谢谢

浏览 17提问于2017-01-15得票数 1

回答已采纳

1回答

Hoverintent在jquery1.8.3中工作，但在1.9.0中不起作用？

jquery、jquery-ui

我追踪到这个错误是因为jquery-1.9.1.js不支持这个悬浮意图，但在1.8.3.js中可以工作。 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>有什么建议我应该怎么解决它吗？我的代码的所有其他部分都与jquery-1.9.1.js兼容。

浏览 1提问于2013-02-15得票数 1

回答已采纳

1回答

在悬浮JS / PHP时更改img属性

javascript、php、html、css

JS是合适的方法。所以我想出了这个代码的想法。但我不知道我怎么能实现这一点。

浏览 1提问于2018-09-19得票数 0

回答已采纳

1回答

是否可以使用谷歌的显示广告平台，只显示特定网站的特定页面上的广告？

google-adsense

使用Google的显示广告平台(广告意识)，是否可以只在特定站点的特定页面上显示广告，只要该特定页面已经通过Google的显示广告平台提供广告服务。例如。我是否可以将广告配置为只在页面example.com/pageone上服务，而不能在其他页面上提供。

浏览 0提问于2021-04-21得票数 1

1回答

在svg上拖动时无法捕获mouseover事件

d3.js、svg、mouseover、drag、highlighting

在拖动时，这是圆圈的颜色：我尝试过在圆圈上使用d3js mouseover事件，但是在拖动时不会被触发，也尝试使用css规则(：悬浮)在圆圈上运行，结果相同。

浏览 4提问于2015-10-08得票数 1

1回答

是否有办法在网页中声明所有javascript http请求必须仅指向同一主机？

javascript、security

我有一个小网站，显示来自不同广告网络的广告。有时，这些广告网络提供包含js代码的广告，这些代码向外部服务器发出HTTP请求，我发现有时这些请求侵犯了用户的隐私。有什么方法阻止js请求到其他服务器吗？(即使我失去了广告的潜在收入，或者被禁止进入广告网络)

浏览 2提问于2021-04-20得票数 2

回答已采纳

4回答

用悬停显示p标签内部元素

jquery

我对JS很陌生，我只是尝试学习在使用CSS3之外的具体的、新的功能。我想了解如何使用悬浮显示当前是div中隐藏的子元素的h1元素。class="box"> <img src="img/concrete.png" />CSSJS

浏览 4提问于2014-04-08得票数 0

回答已采纳

1回答

悬停时广告信息的淡入

php、jquery、css

每幅图片都是其广告的链接。我想添加一个悬停的fadeIn效果，将显示一些信息的广告顶部的图像。我试着做些什么，但我不认为我采取了正确的方法。我觉得有更好的方法让div位于顶部，而不是做保证金：-105 px0；而且，我也想不出如何“如果id=1是悬浮的，fadein id=fade1，否则就会消失”。

浏览 0提问于2014-04-14得票数 0

2回答

NextJS:重新加载Ads、Javascript和路由更改广告插槽

javascript、next.js

我有一个定制的javascript用于在我的NextJS站点上运行广告。这是由广告提供商/广告交换提供的。看起来是这样的：此外，我还在网页上放置了，并使用ad.js javascrip

浏览 0提问于2021-09-23得票数 19

回答已采纳

2回答

使用Vue.js添加自动广告

vue.js、adsense

我已经尝试添加自动广告到我的网站，其中使用Vue.js，但没有通过脚本的请求。但是他们不支持自动广告，普通的广告在这个插件上工作得很好。script data-ad-client="ca-pub-0990618353003742" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogl

浏览 0提问于2019-08-24得票数 1

3回答

google web designer环境更改

google-web-designer

作为环境，我会选择“非谷歌广告”。现在广告代理想要"AdWords"-Banners。是否有可能更改现有文件上的环境？我用谷歌搜索了一下，但什么也没找到。向托马斯致以最美好的问候

浏览 2提问于2015-11-20得票数 3

3回答

MRAID合规性

javascript、ios、mraid

我创建了一个Ad Publisher iOS SDK，它将显示底部横幅广告。它是使用iOS的本地组件创建的，如UIView、UIImageView、UIButton等。如果我使用HTML5创建广告并将其加载到UIWebView中，我可以将mraid.js注入到UIWebView中，并使用以下命令触发广告加载、扩展等功能但是我使用原生组件创建了横幅广告。

浏览 1提问于2013-05-21得票数 1

回答已采纳

1回答