<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<link rel="stylesheet" type="text/css" href="animate.css" />

		<title></title>

		<style type="text/css">

			* {

				margin: 0;

				padding: 0;

			}

			.animated {

				transition: all 0.2s;

				-webkit-transition: all 0.2s;

			}

		</style>

	</head>

	<body>

		<div style="background-color: #CCCCCC; overflow: hidden; line-height: 50px;height: 50px;">

			<ul id="wenzi">

			</ul>

		</div>

		<script>

			let strArr = [

				'111111111111111剪粉丝看撒的发生的塑料袋口附近按时',

				'2222222222222fjdlsssssk老地方付付付付付付付付付付付付军扩',

				'33333333333333福建省多绿扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩军',

			];

			let wz = document.getElementById('wenzi');

			let i = 1;

			wz.innerHTML = `<li class='animated  slideInUp'> ${strArr[0]} </li>`;

			let startMarquee = function() {

				wz.innerHTML = `<li class='animated  slideInUp'> ${strArr[i]} </li>`;

				i++;

				if(i >= strArr.length) i = 0;

			};

			// startMarquee();

			setInterval("startMarquee()", 1500);

		</script>

	</body>

</html>

无间隙
            success = function (data) {

                let strArr = data.data.results;

                console.log(strArr);

                let winList = document.getElementById('winning-list');

                let i = 1, j = 2;

                winList.innerHTML = `<div class="animated slideOutUp">

                                        <img src="${strArr[0].headImgUrl}" alt="" class="winPic">

                                        <span class="winGifBox"><span class="winGif">${strArr[0].nickName}</span>获得了一份奖品</span>

                                     </div>

                                     <div class="animated slideInUp">

                                        <img src="${strArr[1].headImgUrl}" alt="" class="winPic">

                                        <span class="winGifBox"><span class="winGif">${strArr[1].nickName}</span>获得了一份奖品</span>

                                     </div>`;

                listAnimate = function () {

                    winList.innerHTML = `<div class="animated slideOutUp">

                                            <img src="${strArr[i].headImgUrl}" alt="" class="winPic">

                                            <span class="winGifBox"><span class="winGif">${strArr[i].nickName}</span>获得了一份奖品</span>

                                         </div>

                                        <div class="animated slideInUp">

                                            <img src="${strArr[j].headImgUrl}" alt="" class="winPic">

                                            <span class="winGifBox"><span class="winGif">${strArr[j].nickName}</span>获得了一份奖品</span>

                                         </div>`;

                    i++;

                    j++;

                    if (i >= strArr.length) i = 0;

                    if (j >= strArr.length) j = 0;

                };

                setInterval("listAnimate()", 2000);

                if (strArr.length < 1) {

                    clearInterval(listAnimate());

                }

            }

　　

　　

利用animate.css和es6制作文字向上滚动的效果的更多相关文章

  1. jquery 文字向上滚动+CSS伪类before和after的应用

    汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...

  2. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  3. 基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  4. android - TextView单行显示...或者文字左右滚动(走马灯效果)

    条件 TextView单行显示,文字左右滚动(走马灯效果)实现条件: 实现单行设置固定宽度或者设置权重都行 代码 TextView滚动必须写下面几个属性 android:singleLine=&quo ...

  5. Taro -- 文字左右滚动公告效果

    文字左右滚动公告效果 设置公告的左移距离,不断减小,当左移距离大于公告长度(即公告已移出屏幕),重新循环. <View className='scroll-wrap'> <View ...

  6. js标题文字向上滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  7. css实现背景半透明文字不透明的效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. vue文字向上滚动

    <template> <vue-seamless-scroll :data="listData" :class-option="optionHover& ...

  9. 给singer的左侧添加fixedTitle，并显示向上滚动偏移效果；

    1.将写好的dom绝对定位到顶部: 2.dom值为singerlist的currentIndex.title(通过计算属性获取),如果有则显示fixedTitle,没有则隐藏: 3.计算diff:当d ...

随机推荐

  1. clientHeight / scrollHeight / offsetHeight 等属性的区别图

    网页(内容)可见区域宽:document.body.clientWidth 网页(内容)可见区域高:document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度,一 ...

  2. sql stuff拼接字符串的用法

    要把图2显示成图1的方法:要用到stuff函数,并且图1显示的时间有所截断. 图2sql,只是很普通的sql ), SKSJ, )=' order by SKSJ 图1sql,用了stuff拼接 ), ...

  3. XJOI夏令营501-511NOIP训练14——好朋友

    传送门:QAQQAQ 题意:noip2011就要来了,W校的同学们不仅看重这次比赛,更看重noip2011和谁住在同一个房间.同学之间的关系好坏可以用一个亲密值表示,亲密值越大,两个同学关系越好.小A ...

  4. File、FileFilter、递归初步

    java.io.File 文件和目录 路径名的抽象表示形式 文件:File 存储数据的 目录:Directory 文件夹 用来存储文件 路径:Path 定位具有平台无关性 在任意平台都可以使用 Fil ...

  5. 跨数据库查询——dblink

    现在本地建一个dblink Create database link create public database link DBLINKTEST (名称) connect to MGP(用户名) i ...

  6. mui 上拉加载 实现分页加载功能

    mui 上拉加载 实现分页加载功能,效果图: 分页功能(上拉加载): 1.引入需要的css.js文件 <link href="static/css/mui.css" rel= ...

  7. python 对excel操作

    在python中,对excel表格读,写,追加数据,用以下三个模块:1.wlrd 读取excel表中的数据2.xlwt 创建一个全新的excel文件,然后对这个文件进行写入内容以及保存.3.xluti ...

  8. 激活office2016的心路历程

    先转换成VOL版本 32位的office2016用如下代码 @echo off :ADMIN openfiles >nul >nul ||( echo Set UAC = CreateOb ...

  9. Apache Pig和Solr问题笔记（一）

    记录下最近两天散仙在工作中遇到的有关Pig0.12.0和Solr4.10.2一些问题,总共有3个,如下: (1)问题一: 如何Pig中使用ASCII和十六进制(hexadecimal)的分隔符进行加载 ...

  10. mongodb 3.2 yaml 配置详解及范例

    mongodb3.x版本后就是要yaml语法格式的配置文件,下面是yaml配置文件格式如下:官方yaml配置文件选项参考:https://docs.mongodb.org/manual/ ... #c ...