原生js实现中奖信息无间隙滚动效果

中奖信息无间隙滚动效果通常是在网页中的信息滚动区域,而且信息要连贯无缝滚动,没有间隙。实现这个效果的方法有很多,下面我来介绍一种基于原生JS实现的方法。

实现原理

在这个效果中,需要用到三个信息块,从上往下分别为当前显示块、上一个块、下一个块。通过修改它们的CSS属性,可以实现连续无缝滚动的效果。

  1. 首先在HTML中创建滚动区域并添加三个信息块:
<div class="scroll-container"> 
   <p class="current">滚动信息</p> 
   <p class="next">滚动信息</p> 
   <p class="next">滚动信息</p> 
</div>
  1. 在CSS中设置滚动区域的样式:
.scroll-container {
   height: 20px;
   overflow: hidden; 
}
  1. 通过JS来实现滚动的效果。具体实现过程如下:

  2. 获取上一个块、当前块和下一个块:

var currentEl = document.querySelector('.current');
var prevEl = document.querySelector('.prev');
var nextEl = document.querySelector('.next');
  • 设置定时器,使滚动块向上移动:
function slide() {
    prevEl.innerHTML = currentEl.innerHTML;
    currentEl.innerHTML = nextEl.innerHTML;
    nextEl.innerHTML = prizeList[i];

    ++i;
    if (i >= prizeList.length) {
        i = 0;
    }

    setTimeout(slide, 1000);
}

  • 启动滚动:
slide();

示例一

```html

一等奖:100元红包

二等奖:50元红包

三等奖:20元红包

```

示例二

 var prizeList = [
     '一等奖:100元红包', 
     '二等奖:50元红包',
     '三等奖:20元红包',
     '参与奖:谢谢参与'
 ];

 var currentEl = document.querySelector('.current');
 var prevEl = document.querySelector('.prev');
 var nextEl = document.querySelector('.next');
 var i = 0;

 function slide() {
     prevEl.innerHTML = currentEl.innerHTML;
     currentEl.innerHTML = nextEl.innerHTML;
     nextEl.innerHTML = prizeList[i];

     ++i;
     if (i >= prizeList.length) {
         i = 0;
     }

     setTimeout(slide, 1000);
 }

 slide();

通过上述代码的综合运用,就能够实现中奖信息无间隙滚动效果。

阅读剩余 52%

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生js实现中奖信息无间隙滚动效果 - Python技术站

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

相关文章

  • JavaScript学习笔记之创建对象

    关于“JavaScript学习笔记之创建对象”的完整攻略,我会从以下几个方面进行详细讲解: 创建对象的几种方式 对象的属性和方法 示例说明 1. 创建对象的几种方式 在JavaScript中,我们可以使用以下几种方式来创建对象: 1.1 对象字面量 对象字面量是一种常见的创建对象的方式,形式如下: var obj = { key1: value1, key2…

    JavaScript 2023年5月27日
    00
  • 深入学习JavaScript对象

    深入学习JavaScript对象 介绍 JavaScript 中的对象是一种复杂的数据类型,它可以用来组织和存储数据。本攻略将介绍 JavaScript 对象的基本概念以及如何使用它们。 创建对象 在 JavaScript 中有两种创建对象的方式:利用对象字面量和利用构造函数。 对象字面量 对象字面量是由一对花括号包裹的键值对集合。 // 创建一个对象字面量…

    JavaScript 2023年5月17日
    00
  • 用函数式编程技术编写优美的 JavaScript_ibm

    用函数式编程技术编写优美的 JavaScript – 完整攻略 函数式编程是一种将计算机程序视为数学函数的编程范式。在这种编程方式下,函数被视为是数据流变换的原子操作,程序的执行就是一个函数接受输入并返回输出的过程。由于函数式编程减少了状态变量的使用,可以使得代码更加简洁、易读、易维护。 在 JavaScript 中,函数式编程几乎可以应用于所有方面。本文将…

    JavaScript 2023年5月19日
    00
  • 小程序中实现excel数据的批量导入的示例代码

    下面是关于“小程序中实现excel数据的批量导入的示例代码”的完整攻略。 准备工作 在进行excel数据批量导入前,我们需要做一些准备工作:1. 准备一个excel文件,并将需要导入的数据按照一定的顺序保存在sheet表格中。比如我们要导入学生的姓名、年龄、班级等信息,则需将这些信息对应的字段分别保存在不同的列中;2. 借助开发者工具,在小程序中新建一个页面…

    JavaScript 2023年6月10日
    00
  • 微信小程序 扭蛋抽奖机css3动画实现详解

    下面是针对“微信小程序 扭蛋抽奖机css3动画实现详解”的完整攻略: 1. 技术说明 本文所用技术为微信小程序,主要会用到CSS3动画和小程序的Canvas组件。 我们需要使用wx.createCanvasContext方法获取Canvas绘图上下文对象,然后调用该上下文对象的相关方法进行Canvas的渲染和动画绘制。 2. 实现步骤 2.1 页面结构 首先…

    JavaScript 2023年6月10日
    00
  • js获取当前时间(昨天、今天、明天)

    获取当前时间可以使用JavaScript内置对象Date来实现,可以获取当前时间的年份、月份、日期、小时、分钟、秒数、毫秒数等信息。下面是js获取当前时间(昨天、今天、明天)的完整攻略: 获取当前时间 使用new Date()方法创建Date对象,将当前时间赋值给它。 let now = new Date(); 获取昨天的时间 要获取昨天的时间,需要将当前时…

    JavaScript 2023年5月27日
    00
  • C#.Net ArrayList的使用方法

    下面给您讲解一下“C#.Net ArrayList的使用方法”的完整攻略。 1. 什么是ArrayList ArrayList是一种动态数组,它能够存储任意类型的元素,并且能够自动扩展容量。 2. 如何创建ArrayList 使用C#.Net 创建ArrayList的方式如下所示: ArrayList arrayList = new ArrayList();…

    JavaScript 2023年5月28日
    00
  • CSS+jQuery实现的一个放大缩小动画效果

    让我们来详细讲解如何用CSS和jQuery实现一个放大缩小动画效果。 步骤一:添加HTML结构 首先,需要添加一个HTML元素来实现放大缩小功能。我们可以使用<div>元素。 <div class="box"></div> 步骤二:应用CSS样式 接下来,我们需要为这个<div>元素添加CS…

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