js实现广告漂浮效果的小例子

下面是“js实现广告漂浮效果的小例子”的完整攻略。

确定需求

首先,确定需求是实现广告漂浮效果,在页面中展示一张图片或者文字广告,该广告会在页面上上下浮动,并且当鼠标移入时暂停浮动动画,移出时继续浮动。

准备素材

在确定需求后,需要准备素材,即广告的图片或文字。可以自己制作,也可以在网上搜索免费素材。

编写HTML

在准备好素材后,需要编写HTML来展示广告。可以使用HTML中的img标签来展示图片广告,也可以使用div标签来展示文字广告,并设置其样式。

<div class="advertising">这是一条广告</div>

编写CSS

接下来,需要编写CSS来设置广告的样式和初始位置,并设置动画,使其实现上下浮动的效果。可以使用position属性来设置广告的定位方式为绝对定位,然后使用topleft属性来设置广告初始位置。为了实现上下浮动效果,可以使用transform属性来设置广告的Y轴方向的平移。最后,还需要设置动画效果,使广告上下浮动。可以使用@keyframes关键字来设置动画:

.advertising {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateY(0);
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

编写JavaScript

最后一步,需要编写JavaScript来实现鼠标移入暂停浮动、移出继续浮动的效果。可以使用addEventListener方法来监听鼠标移入移出事件,然后在事件处理函数中使用window.clearIntervalwindow.setInterval方法来控制广告的动画效果。

var advertising = document.querySelector(".advertising");
var timer = null;

advertising.addEventListener("mouseenter", function() {
  clearInterval(timer);
});

advertising.addEventListener("mouseleave", function() {
  timer = setInterval(function() {
    advertising.style.animationPlayState = "running";
  }, 3000);
});

timer = setInterval(function() {
  advertising.style.animationPlayState = "running";
}, 3000);

示例说明

示例一:使用图片展示广告

如果需要使用图片展示广告,在HTML中使用img标签,然后在CSS中设置图片的宽度和高度即可:

<img src="advertising.jpg" class="advertising" alt="广告">
.advertising {
  width: 300px;
  height: 250px;
  position: absolute;
  top: 30px;
  left: 50%;
  margin-left: -150px;
  transform: translateY(0);
  animation: floating 3s ease-in-out infinite;
}

示例二:使用背景图展示广告

如果需要使用背景图展示广告,在HTML中使用div标签,然后在CSS中设置背景图的路径即可:

<div class="advertising">这是一条广告</div>
.advertising {
  ...
  background-image: url(advertising.jpg);
  background-size: cover;
  background-position: center;
  ...
}

以上就是“js实现广告漂浮效果的小例子”的完整攻略,希望对您有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实现广告漂浮效果的小例子 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • IE6,IE7和firefox对DIV的支持区别

    DIV是HTML标签中的容器元素,主要用于分割网页的各个区域。IE6、IE7和Firefox是网页浏览器,对DIV的支持有些差异,下面我将为大家详细讲解IE6,IE7和Firefox对DIV的支持区别。 支持CSS样式的差异 在IE6和IE7中,CSS样式的支持存在一定的缺陷。例如,对于一些CSS样式的渲染,IE6和IE7往往需要通过hack、特定的styl…

    css 2023年6月10日
    00
  • CSS 控制Html页面高度导致抖动问题的原因

    CSS 控制 HTML 页面高度导致抖动问题,主要是由于浏览器的渲染机制和 CSS 盒模型导致的。下面是详细的攻略: 原因分析 CSS 盒模型 在 CSS 盒模型中,一个元素的高度由 content、padding、border 和 margin 决定。当我们通过 CSS 控制元素的高度时,实际上是控制了该元素的 content 高度。 浏览器渲染机制 在浏…

    css 2023年6月9日
    00
  • IE6 为什么最多人使用

    首先我们需要了解一下 IE6 的历史背景和特点。 IE6 的历史背景和特点 IE6 的历史背景 发布时间:2001 年; 盛行时间:大约持续至 2007 年左右。 在 IE6 发布之前,Internet Explorer 市场份额已高,而当 IE6 发布后,不断得到更新维护,成为了当时最流行的浏览器。其内核 Trident 与其他浏览器不同,渲染速度较快,性…

    css 2023年6月11日
    00
  • 推荐彻底弄懂CSS盒子模式(DIV布局快速入门)第2/3页

    首先需要了解CSS盒子模型的概念,它指的是由内容区域、内边距、边框和外边距四个部分组成的矩形框。而DIV布局是基于盒子模型来进行页面布局的。 在第2页,我们需要掌握CSS盒子模型的基本概念和如何应用CSS盒子模型进行布局。我们需要先清除默认样式,将所有元素的margin和padding设为0,然后设置一个div元素的宽度和高度,添加背景颜色和边框,就形成了一…

    css 2023年6月9日
    00
  • CSS清除浮动 clearfix:after 使用技巧及兼容Firefox等符合W3C标准的浏览器

    让我来详细讲解一下使用 CSS 清除浮动的技巧。 什么是清除浮动? 在 CSS 中,当一个元素设置浮动后,它将会从文档的正常流中脱离出来,可能导致包含该元素的父元素无法正确地计算高度,使得页面布局混乱。因此需要使用清除浮动的技巧,让包含浮动元素的父元素能够正确地计算高度。 使用伪元素清除浮动 最常用的清除浮动的方法是使用 clear: both;,然而这种方…

    css 2023年6月10日
    00
  • 漂亮的Django Markdown富文本app插件的实现

    一、Django Markdown富文本app插件的实现 安装django-markdown-deux 要实现Django Markdown富文本app插件,首先需要安装一个Markdown库,这里我们使用django-markdown-deux库。可以通过命令行在虚拟环境中安装: pip install django-markdown-deux 配置set…

    css 2023年6月10日
    00
  • Vue3中使用defineCustomElement 定义组件详解

    下面我将为你详细讲解Vue3中使用defineCustomElement定义组件的完整攻略。 什么是defineCustomElement? 在Vue3中,我们可以通过defineCustomElement方法来定义一个自定义元素,自定义元素是Web Components技术的核心概念之一,它允许我们创建出具有完全自定义行为的HTML元素,它可以被认为是一种…

    css 2023年6月9日
    00
  • CSS样式按整洁易懂的结构组织

    在编写CSS样式时,整洁易懂的结构组织是非常重要的。这可以使代码易于阅读、维护和修改。以下是CSS样式按整洁易懂的结构组织的完整攻略: 1. 选择器的组织 在编写CSS代码时,选择器的组织是很重要的。通常情况下,我们使用层叠的选择器结构来定义样式。在定义选择器时,应该优先考虑ID选择器、class选择器,然后再使用标签名选择器。这样可以提高代码的可读性、性能…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部