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

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

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

确定需求

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

准备素材

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

编写HTML

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

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

编写CSS

接下来，需要编写CSS来设置广告的样式和初始位置，并设置动画，使其实现上下浮动的效果。可以使用position属性来设置广告的定位方式为绝对定位，然后使用top、left属性来设置广告初始位置。为了实现上下浮动效果，可以使用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.clearInterval和window.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实现广告漂浮效果的小例子”的完整攻略，希望对您有所帮助。