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日

相关文章

  • html中table为每个单元格设置不同颜色和宽度

    要在HTML中为每个单元格设置不同颜色和宽度,需要使用CSS。以下是详细的步骤: 第一步:创建HTML表格 在HTML中使用<table>标签创建表格,并使用<tr>标签创建每一行,<td>标签创建每个单元格。以下是一个简单的例子: <table> <tr> <td>Row 1, Cel…

    css 2023年6月9日
    00
  • 关于带有”显示更多”按钮的多行文本截断思考

    关于带有”显示更多”按钮的多行文本截断思考攻略,可以从下列步骤入手: 步骤1:确定截断长度 首先,需要确定文本截断的长度。可以根据实际需要来确定,通常情况下,为了不让页面显得过于拥挤,建议将多于两行的文本进行截断。 步骤2:截断文本 使用CSS的text-overflow属性可以将多行文本截断并显示”…”。但是,这样做的效果并不好,用户难以知道截断的文本…

    css 2023年6月10日
    00
  • CSS3实现多样的边框效果

    CSS3实现多样的边框效果,可以使用一些新的属性和值,如border-radius、box-shadow、border-image等。 1. 实现圆角边框 要实现圆角边框,可以使用border-radius属性。这个属性可以用来设置div等标签的边框圆角的半径,而且不需要用到像素单位,可以使用百分号的方式来设置圆角大小。 div { border: 2px …

    css 2023年6月9日
    00
  • IE和Firefox在JavaScript应用中的兼容性探讨

    IE和Firefox在JavaScript应用中的兼容性探讨 JavaScript是前端开发常用的编程语言之一,在不同的浏览器中,JavaScript的表现也会有所不同。本文将对IE和Firefox在JavaScript应用中的兼容性问题进行探讨,帮助开发者更好地处理这些问题。 常见的IE和Firefox兼容性问题 1. DOM API兼容性 在处理DOM元…

    css 2023年6月10日
    00
  • 网页缓冲效果特效代码

    下面是关于网页缓冲效果特效代码的完整攻略: 标题一:什么是网页缓冲效果特效代码? 网页缓冲效果特效代码是指通过一些前端技术,让网页在加载过程中具有较好的用户体验,而不是显示空白或者没有任何反应。这类特效效果一般包括一些动画、进度条、过渡效果等。常见的缓冲效果有:loading动画,进度条,骨架屏等等。 标题二:如何实现网页缓冲效果特效? 实现网页缓冲效果特效…

    css 2023年6月9日
    00
  • 前端开发之CSS原理详解

    CSS是前端开发中不可或缺的一部分,它用于控制网页的样式和布局。本攻略将详细讲解CSS的原理,包括CSS的基本语法、选择器、盒模型、布局、浮动、定位、响应式设计等内容。 CSS的基本语法 CSS的基本语法由选择器和声明块组成。选择器用于选择要应用样式的HTML元素,声明块由一组属性和值组成,用于定义元素的样式。例如: h1 { color: red; fon…

    css 2023年5月18日
    00
  • 详解Vue.js3.0 组件是如何渲染为DOM的

    下面就来详细讲解一下Vue.js3.0 组件是如何渲染为DOM的攻略。 组件渲染说明 在 Vue.js 中,组件是一个独立的单元,可以复用和拆分,使得我们的代码更加模块化和易于维护。Vue.js3.0 的组件渲染过程主要包含以下几个步骤: 组件的准备阶段:Vue.js会读取组件模板中的标签和属性,解析出组件的结构和属性配置; 组件的实例化阶段:Vue.js …

    css 2023年6月10日
    00
  • IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

    针对IE6/IE7下绝对定位position:absolute和margin的冲突问题,一般可以采取以下三种解决方式: 解决方式一:使用相对定位做包裹层 首先,我们可以为需要布局的元素外层再套一层div,设置这个包裹层为position:relative; <div style="position:relative;"> &l…

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