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 ...
随机推荐
- thinkPHP问题记录
路由组合变量问题 按照下面的顺序 http://localhost/tp5/public/hello-dfggfqw21321 变量 name 会无法正确传递,但 http://localhost/t ...
- Python json 序列号字典 文本的存储和读取
rootDir='./resources/v1/'# 根目录 # 按钮测试图片 btnTestPicUrl = { 'armyAttack' : rootDir+'testPic/gj2.jpg', ...
- 写入时复制（CopyOnWrite）
一.CopyOnWrite 思想 写入时复制(CopyOnWrite,简称COW)思想是计算机程序设计领域中的一种通用优化策略.其核心思想是,如果有多个调用者(Callers)同时访问相同的资源(如内 ...
- VSTO开发指南（VB2013版） 第二章 Office解决方案介绍
实例2.1 通过控制台实现对Excel的自动化处理 书本第32页 注:添加两个引用: 第一个:程序集—框架—“System.Windows.Forms 4.0.0.0”第二个:程序集—扩展—“Micr ...
- Android中四种补间动画的使用示例(附代码下载)
场景 Android中四种补间动画. 透明度渐变动画 旋转动画 缩放动画 平移动画 注: 博客: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程 ...
- 原创：mysql5 还原至mysql 8.0.11数据库链接配置提示错误（修改内容有三处
原创:mysql5 还原至mysql 8.0.11数据库链接配置提示错误改有三: a) mysql 连接jar包版修改 b)类路径修改 c)配置连接池地址修改 因版本升级,首先要修改 1:mysql- ...
- Hibernate(六)--缓存策略
缓存: 缓存就是数据库数据在内存中的临时容器,包括数据库数据在内存中的临时拷贝,它位于数据库与数据库访问中间层,ORM在查询数据时,首先会根据自身的缓存管理策略,在缓存中查找相关数据,如果发现所需的数 ...
- Newtonsoft--自定义格式化日期
public string ToJson(object obj, string timeFormat) { try { IsoDateTimeConverter timeConverter = new ...
- MyBatis的基本注解
MyBatis的基本注解: 增删改查 @Select("select * from teacher") public List<Teacher> selAll(); / ...
- centos python虚拟环境安装
pip install virtualenv pip install virtualenvwrapper vim ~/.barshrc export VIRTUALENVWRAPPER_PYTHON= ...