jQuery文本轮播特效

小道消息：离开学校象牙塔已经半年了。生活不再充满茫然，而是忙碌。加班半个多月，活动和项目终于告一段落，今天将是检验其真正价值的时候。现在，我们来总结一下在这个发展中遇到的问题。

项目背景：这个项目主要是做一个中国酒店人气排名的营销活动，主要是基于微信上的传播。预计访问次数将达到1亿次和2000次/秒，有很多容错计划。这次主要负责前端主页的显示效果。

功能点：

无缝文本轮播(不在乎为什么移动端有这样的需求)

说到无缝文本滚动，首先想到的是marquee，但是很久没有碰过了，w3c也没有维护。此外，在所有滚动完成之前，它不会再次滚动，基于px for rem布局的滚动体验会很差。

第二种思路是采用类似jquery的照片轮播机制，基本可以完成，但发现jquery和zepto文本在滚动时都会抖动，可用性差。

然后在css3中还有少量的js，可以用少量的代码实现不同长度的字符和不定数量的字符的无缝滚动和轮播。

让我们先看看html结构

div class=' outer ' ul id=' j _ scroll ' li1。这是第一个数据。这是第二个数据/李莉。这是第三个数据。这是第四个数据/li li5。这是第五个数据/li li1。

其次是css相关数据。外部{ width: 122px高度： 80px；飞越：隐藏；} .外部ul { display : inline-block；高度： 80px；-web kit-transform : translate 3d(0，0，0)；/* 3d渲染，开启硬件加速*/transform:平移3d (0，0，0)；font-size : 0；/*使内联块没有默认间距*/white-space : nowrap；/*越界*/}。外部ul Li {显示器：直列式模块；填充-右侧： 50px；-web kit-transform : translate 3d(0，0，0)；transform: translate3d(0，0，0)；font-size : 24px；} .动画20s无限线性；-web kit-animate : hea animation 20s无限线性；} @关键帧图像{来自{ transform : translatex(0%)；}到{ transform : translatex(-100%)；} } @-web kit-关键帧图像{来自{-web kit-transform : translatex(0%)；}到{-web kit-transform : translatex(-100%)；}}由于IOS中的一些渲染机制，最好在滚动元素内部启动硬件加速，否则会出现卡顿、文字显示不完整的问题。

最后，js

$('#J_scroll ')。宽度($('#J_scroll ')。width()-$(' # J _ scroll Li : first-child ')。innerWidth())；$('#J_scroll ')。add CLaSS(' an imation ')；Jquery写在这里。相信大家都能理解，就是让滚动元素的宽度等于其内部元素的总宽度减去第一个(或最后一个)元素的宽度，这样才能保证无缝效果。

最后我想解释一下为什么要用js动态添加css3的类名来实现滚动效果。刚开始的时候也想直接在滚动元素上写css3滚动效果，但是发现在iPhone上第一次加载当前页面时，不会自动滚动。