<!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. MySQL Download

    { http://www.wampserver.com/#wampserver-64-bits-php-5-6-25-php-7 }

  2. Taro框架---左滑动删除

    index.js import Taro, { Component } from '@tarojs/taro' import { View,ScrollView } from '@tarojs/com ...

  3. VS2010-MFC（对话框：向导对话框的创建及显示）

    转自:http://www.jizhuomi.com/software/166.html 上一节讲了属性页对话框和相关的两个类CPropertyPage类和CPropertySheet类,对使用属性页 ...

  4. Seam科普

    声明:这是引用的,具体引用位置在最下面. 只供个人学习,免得忘记了又要到处找,十分感谢原作作者.如果有什么问题请联系我. Seam框架开发一个HelloWrld的例子. Seam本身,而在于Seam使 ...

  5. Acess link

  6. Ubuntu下搭建Pixhawk开发环境

    安装提示 需要网络环境,不然下载会很慢. 工具安装 1. 权限设置 sudo usermod -a -G dialout $USER 代码输入可以拷贝,但是不可以用快捷键. 需要输入密码,输入密码无显 ...

  7. k8s 是什么，有什么功能

    k8s是一个docker集群的管理工具 k8s是容器的编排工具 1. k8s的核心功能 自愈: 重新启动失败的容器,在节点不可用时,替换和重新调度节点上的容器,对用户定义的健康检查不响应党的容器会被中 ...

  8. ssm 框架整合 代码初步 maven配置

    pom.xml 配置<!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc --> <de ...

  9. linq to sql any和all的区别

    Any说明:用于判断集合中是否有元素满足某一条件:不延迟.(若条件为空,则集合只要不为空就返回True,否则为False).1.简单形式:仅返回没有订单的客户:var q =from c in db. ...

  10. SpringCloud学习笔记《---03 Ribbon---》基础篇