vue文字向上滚动
<template>
<vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">
<ul class="item">
<li v-for="item in listData">
<span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
</li>
</ul>
</vue-seamless-scroll>
</template> <script>
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
export default {
data () {
return {
listData: [{
'title': '无缝滚动第一行无缝滚动第一行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第二行无缝滚动第二行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第三行无缝滚动第三行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第四行无缝滚动第四行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第五行无缝滚动第五行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第六行无缝滚动第六行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第七行无缝滚动第七行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第八行无缝滚动第八行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第九行无缝滚动第九行',
'date': '2017-12-16'
}]
}
},
computed: {
optionHover () {
return {
hoverStop: false, //是否悬停
singleHeight:26, // 单行停顿
waitTime:2500, //单行停顿时间 }
}
}
}
</script>
<style lang="scss" scoped>
.seamless-warp {
height: 229px;
overflow: hidden;
}
ul li{
list-style-type:none;
}
</style>
效果如下:
vue文字向上滚动的更多相关文章
- jquery 文字向上滚动+CSS伪类before和after的应用
汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...
- js文字向上滚动代码
js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px; background:#edfafd; padding-top:2px; ...
- js标题文字向上滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 利用animate.css和es6制作文字向上滚动的效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel= ...
- vue文字间歇无缝向上滚动
公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...
- Jquery实现文字向上逐条滚动
直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- jquery插件之文字间歇自动向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...
- jquery插件之文字无缝向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...
- 文字列表无缝向上滚动JavaScript代码
<!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...
随机推荐
- python自动华 (十五)
Python自动化 [第十五篇]:CSS.JavaScript 和 Dom介绍 本节内容 CSS javascript dom CSS position标签 fixed: 固定在页面的某个位置 rel ...
- Python3发送webservice请求
Python3使用suds-jurko库来发送webservice接口请求 导入请求webservice接口需要用到的包 pip install suds-jurko 第一步:导入所需要的包 from ...
- Java中通过Array.sort()对数组从大到小排序
package com.itheimajavase; import java.util.Arrays; import java.util.Comparator; public class Day01 ...
- P4148 简单题 k-d tree
思路:\(k-d\ tree\) 提交:2次 错因:整棵树重构时的严重错误:没有维护父子关系(之前写的是假重构所以没有维护父子关系) 题解: 遇到一个新的点就插进去,如果之前出现过就把权值加上. 代码 ...
- mouseover([[data],fn])
mouseover([[data],fn]) 概述 当鼠标指针位于元素上方时,会发生 mouseover 事件. 该事件大多数时候会与 mouseout 事件一起使用.直线电机选型 注释:与 mous ...
- v-for为什么要加key,能用index作为key么
前言 在vue中使用v-for时,一直有几个疑问: v-for为什么要加key 为什么有时候用index作为key会出错 带着这个疑问,结合各种博客和源码,终于有了点眉目. virtual dom 要 ...
- Cogs 1500. 误差曲线(三分)
误差曲线 ★★ 输入文件:errorcurves.in 输出文件:errorcurves.out 评测插件 时间限制:1 s 内存限制:256 MB [题目描述] Josephina是一名聪明的妹子, ...
- Python学习日记(二)——字符转编码操作
首先搞清楚:Python3的默认编码是unicode,Python2的默认编码是ASCII码 为什么需要编解码? 打个比方:假如说我做了一个游戏,叫<西游记>,游戏传到了日本去.但是日本人 ...
- mysql —复制
MySQL的扩展 读写分离 复制:每个节点都有相同的数据集 向外扩展 二进制日志 单向 复制的功用: 数据分布 负载均衡读 备份 高可用和故障切换 MySQL升级测试 MySQL复制相关概念 主从复 ...
- Highcharts 使用总结
一.Highcharts series属性 1.下面是一个基本曲线图的例子: <html> <head> <meta charset="UTF-8" ...