<!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安装pdf介绍

    pdf地址:https://files.cnblogs.com/files/pygo/mysql%E5%AE%89%E8%A3%85.pdf

  2. Python中虚拟环境venv的基本用法

    环境windows 7 venv为python3中的默认库,无需安装. 创建新的venv方法, 在当前文件夹下执行cmd,输入如下代码 python -m venv bob bob为需要创建的文件夹名 ...

  3. thinkphp ASSIGN标签

    ASSIGN标签用于在模板文件中赋值变量,用法如下: 直线电机厂家 <assign name="var" value="123" /> 在运行模板的 ...

  4. thinkphp url大小写

    系统默认的规范是根据URL里面的模块名.控制器名来定位到具体的控制器类的,从而执行控制器类的操作方法. 以URL访问 http://serverName/index.php/Home/Index/in ...

  5. 期望dp——zoj3640

    /* dp[i]表示力量为i时的期望 dp[i]=sum{tj}/n+sum{dp[i+cj]+1}/n //前一项是cj<i的和,后一项是cj>=i的和 初始状态dp[m] */ #in ...

  6. shiro框架的组成和内部结构(下一篇为spring整合shiro)

    1.shiro简介 Apache Shiro是Java的一个安全框架.功能强大,使用简单的Java安全框架,它为开发人员提供一个直观而全面的认证,授权,加密及会话管理的解决方案. ​ 实际上,Shir ...

  7. Responder对象

    Responder对象 响应者是一个对象,它可以响应事件并处理它们.所有响应者对象是类的,最终从UIResponder的( IOS)或NSResponder ( OS X)继承实例.这些类声明一个编程 ...

  8. System.Web.Mvc.Filters.IAuthenticationFilter.cs

    ylbtech-System.Web.Mvc.Filters.IAuthenticationFilter.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Cultu ...

  9. 2day:Python基础

    基础知识: 1.python文件的后缀名:.py 2 .Windows Python的执行方式:Python 解释器路径  py文件路径 例:C:\python3\python.exe d:\1.py ...

  10. Kindle电子书制作

    text.html: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv=& ...