有时候在页面的某个模块中,需要无限循环的滚动一些消息。那么如果我们用 js 实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)?
向上滚动 A 的父级容器;
- setInterval
克隆一份数据放在后面,是为了当 A 向上移动时,后面有数据能填补漏出来的空白。当 B 移动到可视区域的顶部时,此时 A 刚好移出可视区域,那么此时将容器重新归 0,用户是没有感知的,以为还是 B 中的第一条数据。然后继续向上滚动。
若要用 CSS3 的属性实现的话,非
莫属,因为 transition 是需要手动的触发,而且不能无限次执行下去,而
- animation
恰好能解决这个问题。
- animation
假如数据是在写死的情况下时,我们完全可以手动复制一份数据放在后面,然后把原数据的高度写到 css 中,实现的思路与上面的一样:
css 样式:
- @keyframes rowup {
- 0% {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- 100% {
- -webkit-transform: translate3d(0, -307px, 0);
- transform: translate3d(0, -307px, 0);
- display: none;
- }
- }
- .list{
- width: 300px;
- border: 1px solid #999;
- margin: 20px auto;
- position: relative;
- height: 200px;
- overflow: hidden;
- }
- .list .rowup{
- -webkit-animation: 10s rowup linear infinite normal;
- animation: 10s rowup linear infinite normal;
- position: relative;
- }
html 格式:
- <div class="list">
- <div class="cc rowup">
- <div class="item">
- 1- 121233fffffr国家认可更健康进口价格困扰
- </div>
- <div class="item">
- 2- 3123233
- </div>
- <div class="item">
- 3- 个人口结构俄跨入国际科技馆客人感觉
- </div>
- <div class="item">
- 4- ggrgerg
- </div>
- <div class="item">
- 5- fvdgdv
- </div>
- <div class="item">
- 6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者:她死了法官要负责!
- </div>
- <div class="item">
- 7- 外交部再次回应印军越界:要求立即将越界部队撤回
- </div>
- <div class="item">
- 8- 德国网红致信默克尔
- </div>
- <div class="item">
- 9- 国资委原
- </div>
- <div class="item">
- 1- 121233fffffr国家认可更健康进口价格困扰
- </div>
- <div class="item">
- 2- 3123233
- </div>
- <div class="item">
- 3- 个人口结构俄跨入国际科技馆客人感觉
- </div>
- <div class="item">
- 4- ggrgerg
- </div>
- <div class="item">
- 5- fvdgdv
- </div>
- <div class="item">
- 6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者:她死了法官要负责!
- </div>
- <div class="item">
- 7- 外交部再次回应印军越界:要求立即将越界部队撤回
- </div>
- <div class="item">
- 8- 德国网红致信默克尔
- </div>
- <div class="item">
- 9- 国资委原
- </div>
- </div>
- </div>
运行的效果如下查看实例 1:
在上面的小节中,数据是死的,高度也是写死到了 CSS3 中。可是如果从接口获取到的数据个数不定呢,每条数据的长度也不确定,怎么办呢?
这里就需要根据数据来重新计算高度,并写到 CSS 里,可是 keyframes 修改起来还比较麻烦,那么我们就用覆盖的方式来重新 keyframes 中的数据:
- // 设置keyframes属性
- function addKeyFrames(y){
- var style = document.createElement('style');
- style.type = 'text/css';
- var keyFrames = '\
- @-webkit-keyframes rowup {\
- 0% {\
- -webkit-transform: translate3d(0, 0, 0);\
- transform: translate3d(0, 0, 0);\
- }\
- 100% {\
- -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
- transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
- }\
- }\
- @keyframes rowup {\
- 0% {\
- -webkit-transform: translate3d(0, 0, 0);\
- transform: translate3d(0, 0, 0);\
- }\
- 100% {\
- -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
- transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
- }\
- }';
- style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
- document.getElementsByTagName('head')[0].appendChild(style);
- }
计算出原始数据 A 的高度后,执行 addKeyFrames 方法,往 head 中添加 css 属性,那么这里的 rowup 就会覆盖掉之前设置的,每次滚动的距离就是数据 A 的高度:
- function init() {
- var data = '塞下秋来风景异,衡阳雁去无留意。四面边声连角起,千嶂里,长烟落日孤城闭。浊酒一杯家万里,燕然未勒归无计。羌管悠悠霜满地,人不寐,将军白发征夫泪。',
- //样例数据
- data_len = data.length,
- len = parseInt(Math.random() * 6) + 6,
- // 数据的长度
- html = '<div class="ss">';
- for (var i = 0; i < len; i++) {
- var start = parseInt(Math.random() * (data_len - 20)),
- s = parseInt(Math.random() * data_len);
- html += '<div class="item"v>' + i + '- ' + data.substr(start, s) + '</div>';
- }
- html += '</div>';
- document.querySelector('.list .cc').innerHTML = html + html; // 复制一份数据
- var height = document.querySelector('.list .ss').offsetHeight; // 一份数据的高度
- addKeyFrames('-' + height + 'px'); // 设置keyframes
- document.querySelector('.list .cc').className += ' rowup'; // 添加 rowup
- }
- init();
可以【查看实例】,这样在 CSS3 与 js 的结合下,更完美的呈现无缝滚动。
上面讲解的都是向上滚动,那么向左,向右,向下也比较容易理解了,把
中的值更改为对应的数值即可。
- transform
使用 CSS 来进行动画的展示,会让页面显得更加流畅。如果能用 CSS 实现,可以尝试尽量用 CSS 实现下。
如果你觉得不错,欢迎关注我的公众号:wenzichel
来源: http://www.cnblogs.com/xumengxuan/p/7114721.html