vue 实现文字无缝滚动效果

来源:http://www.chinese-glasses.com 作者:Web前端 人气:84 发布时间:2020-03-24
摘要:时间: 2019-11-04阅读: 93标签: 效果需求: 应朋友的邀请,帮他公司做jQuery缩略图正中间的为当前播放到的图片,两边呈发散状,逐渐缩小并降低透明度。假设当前正播放到第0张图片,则

时间: 2019-11-04阅读: 93标签: 效果需求:

应朋友的邀请,帮他公司做jQuery缩略图正中间的为当前播放到的图片,两边呈发散状,逐渐缩小并降低透明度。假设当前正播放到第0张图片,则排列情况如下:

对中奖用户进行滚动效果展示

10bet 1

这种效果需求还是蛮多的,想起之前用JQuery实现的一个无缝滚动( 缅怀过去),是通过jq的animate方法实现的,动画结束之后就将第一个元素appendTo追加到最后面,实现循环滚动特效,不得不感叹技术更新换代真的很快。

缩略图正中间的为当前播放到的图片,两边呈发散状,逐渐缩小并降低透明度。假设当前正播放到第0张图片,则排列情况如下:

回到现在Vue的项目,本来想用插件,但是觉得这么一个小动画用插件有点太重了,还是自己写一个比较好。

0

10bet,实现原理

1 4

实现原理也比较简单

2 3

对整个列表实现上移动画将列表的第一个数据移动到最后一个

按逆时针方向转一张图后的排列情况如下:

因为vue是基于数据驱动的,所以,对我们开发者来说,直接操控数组,删除第一个数组数据,然后追加到数组后面就好了。

4

template 部分

0 3

 !-- 无缝滚动效果 -- div  ul : li v-for="(item, index) in listData" :key="index"{{item}}/li /ul /div 

1  2

script部分

这个只是缩略图的播放效果,缩略图轮转时,后面有对应大图跟着从右到左滚进,并且大图进入的速度要对应着缩略图轮转,整体效果如下:

export default { name: "marquee-up", data() { return { animateUp: false, listData: ['12***ve 成功邀请12人 已获奖金60元', 'l***e 成功邀请5人 已获奖金40元', 'l***e 成功邀请1人 已获奖金5元'], timer: null } }, mounted() { this.timer = setInterval(this.scrollAnimate, 1500); }, methods: { scrollAnimate() { this.animateUp = true setTimeout(() = { this.listData.push(this.listData[0]) this.listData.shift() this.animateUp = false }, 500) } }, destroyed() { this.timer = null }};

一个幻灯播放效果,效果如下:

style 部分

10bet 2

.marquee-wrap { width: 80%; height: 40px; border-radius: 20px; background: rgba($color: #000000, $alpha: 0.6); margin: 0 auto; overflow: hidden; .marquee-list { li { width: 100%; height: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0 20px; list-style: none; line-height: 40px; text-align: center; color: #fff; font-size: 18px; font-weight: 400; } } .animate-up { transition: all 0.5s ease-in-out; transform: translateY(-40px); }}

本人考虑将缩略图轮转与大图的滚进分开两部分,缩略图轮转做为一个单独的jQuery插件,由此插件中的事件带动大图的滚进。下面先来说说缩略图的轮转插件的实现:

1、插件的参数:

this.defaults = {         auto: false,        //是否自动播放         width: 85,          //缩略图的宽度         height: 42,         //缩略图的高度         onstart: null,      //开始滚动         onchange: null     //滚动事件  }; 

2、插件的事件:

onstart事件,为每次开始启动轮转时触发一次,转出的参数有:当前缩略图的jQuery对象与轮转到下一次缩略图的jQuery对象:

opt.onstart && opt.onstart  (me.Images.img[curIdx].img$, me.Images.img[idx].img$); 

本文由10bet发布于Web前端,转载请注明出处:vue 实现文字无缝滚动效果

关键词:

上一篇:1.初步认识TypeScript

下一篇:没有了

频道精选

最火资讯