vue制作滚动条幅-跑马灯效果实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="button" :value="startBtn" @click="startRoll" />
<input type="button" :value="endBtn" @click="endRoll" />
<p>{{content}}</p>
</div>
</body>
<script type="text/javascript">
var test = function(){
alert("hello")
}
var vm = new Vue({
el:'#app',
data:{
startBtn:'开始滚动',
endBtn:'停止滚动',
content:'中国加油，武汉人民加油，我们一定可以战胜疫情的！',
intervalId:null
},
methods:{
startRoll(){
if(this.intervalId != null){return}
this.intervalId = setInterval(function(){
console.log(vm)
var first = vm.content.substring(0,1)
var end = vm.content.substring(1,vm.content.length)
vm.content = end + first
console.log(vm.content)
},500)
},
endRoll(){
clearInterval(this.intervalId)
this.intervalId = null
}
}
})
</script>
</html>
效果：
vue制作滚动条幅-跑马灯效果实例代码的更多相关文章
- 自定义有焦点的TextView实现广告信息左右一直滚动的跑马灯效果
import android.content.Context; import android.text.TextUtils; import android.util.AttributeSet; imp ...
- javascript小记五则：用JS写一个图片左右自由滚动的“跑马灯”效果
之前看了很多百度搜索出的东西,十个有九个是不能实用的,个个讲的都不详细,今天详细给大家讲解下关于这个图片“跑马灯”滚动效果,源码如下: <!DOCTYPE html PUBLIC "- ...
- Android TextView 横向滚动（跑马灯效果）
Android TextView 中当文字比較多时希望它横向滚动显示,以下是一种亲測可行的方法. 效果图: 1.自己定义TextView,重写isFocused()方法返回true,让自己定义Text ...
- 第二章 Vue快速入门--10-11 跑马灯效果制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- TextView跑马灯效果
转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...
- 安卓之文本视图TextView及跑马灯效果
一.基本属性和设置方法 二.跑马灯用到的属性与方法说明 三.省略方式的取值说明 四.跑马灯效果案例代码 (1)布局xml文件 <?xml version="1.0" en ...
- android:ellipsize实现跑马灯效果总结（转）
最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...
- android:ellipsize实现跑马灯效果总结
最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说都是 ...
- android ellipsize的使用及实现跑马灯效果总结
参考资料: http://blog.csdn.net/huiwolf2008/article/details/7901084 http://www.cnblogs.com/Gaojiecai/arch ...
随机推荐
- 用bootstrap来放置天气和图标的位置 自适应
今天写了个关于天气的页面,他的摆放位置有点难,花了一两个小时用bootstrap来摆放,但是感觉bug很多 所以今天写下自己的心得,放上代码,以后这种就知道怎么写了 <div class=&qu ...
- CSS权威指南（第三版)
CSS权威指南(第三版).pdf 网盘: https://545c.com/file/24657411-425141851 获取码: 276922
- .net core 中api 模型验证
AddControllers/AddMvc方法允许添加自定义ActionFilterAttribute进行过滤 文档中这么定义Filter: 可以创建自定义筛选器,用于处理横切关注点. 横切关注点的示 ...
- 10.python内置模块之os模块
os模块的作用:os 模块提供了非常丰富的方法用来处理文件和目录(管理和维护目录以及文件). os.path模块的作用:主要用于获取文件的属性(管理路径的(物理地址)). 小生总结了一些平时常用到的属 ...
- 第2章 在 HTML中 使用 JavaScript
第2章 在 HTML中 使用 JavaScript 2.1 script 元素 2.1.1 标签的位置 2.1.2 延迟脚本 2.1.3 异步脚本 2.1.4 在XHTML中的使用 2.1.5 不推荐 ...
- 【Spring】bean的作用域（@Scope） - singleton、prototype
已知spring 3+已拥有多种不同的作用域: singleton(默认).prototype.request.session.global session.(参考: spring中scope作用域( ...
- ArcMap 新建空白图层，并添加元素
想要添加新的图层,不能从File 里找,那里都是添加数据,貌似ArcGIS的定位是对数据的处理. 比如导入其他格式文件,或者导入对应的数据文件.excel csv cad 等,在此基础上进行分析,而不 ...
- Java教程-修炼
在2020这个特殊的时期,在家就是为国家做贡献!一切都会好起来的,加油中国!! Java 第一章 Java概述 1.1 Java历史 1.2 Java语言最主要的特点 1.3 Java环境搭建 1.3 ...
- 用浏览器的油猴子脚本调用IDM下载百度云盘中的资料
用浏览器的油猴子脚本调用IDM下载百度云盘中的资料(只能支持单个文件下载) 第一步需要现在浏览器中安装油猴子插件Tampermonkey.crx 安装油猴子插件插件主页:https://tamperm ...
- PHP版常用算法
PHP版常用算法最近准备面试的资料,顺便整理一下以前的基本算法,写个DEMO记录一下 //冒泡//逐行对比,满足条件则交换function bubbleSort($arrData,$sort = 'd ...