vue实现公告展示效果

效果图

代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css"/>
</head>
<style type="text/css">.btn-click{display: flex;align-items: center;justify-content: center;margin-top: 30px;margin-bottom: 20px;}.msg{display: flex;flex-direction: row;border: 1px solid #D9D9D9;border-radius: 5px;align-items: center;white-space:nowrap;overflow: hidden;}
</style>
<body><div id="app"><div class="container"><div class="row"><div class="btn-click"><input type="button" value="开始" class="btn btn-primary" @click="lang" />&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="停止" class="btn btn-danger" @click="stop" /></div><div class="msg"><span class="glyphicon glyphicon-volume-up float-left"  aria-hidden="true" style="margin-left: 10px;margin-right: 10px;"></span><h4>{{msg}}</h4></div></div></div></div><script type="text/javascript">// 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名  或  this.方法名 来进行访问，这里的this，就表示 我们 new 出来的  VM 实例对象var vm = new Vue({el:'#app',data:{msg:'这是公告--世上有味之事，包括诗，酒，哲学，爱情，往往无用。吟无用之诗，醉无用之酒，读无用之书，钟无用之情，终于成一无用之人。',intervalId:null //在data上定义 定时器Id},methods:{lang(){if(this.intervalId !== null){return;}var _this = thisthis.intervalId = setInterval(function(){// 获取到头的第一个字符var start = _this.msg.substring(0,1)// 获取到后面的所有字符var end = _this.msg.substring(1)// 重新拼接得到的字符串 并赋值给this.msg_this.msg = end + start},400)},stop(){// 停止定时器clearInterval(this.intervalId)// 每当清除了定时器重新把intervalId设置为nullthis.intervalId = null}}})</script></body>
</html>

vue实现公告展示效果相关推荐

vue+echarts+自适应实现可视化大屏展示效果
展示效果: 一.分辨率按照1920px*1080px,16:9展示效果最佳,不同分辨率可自适应,但图像可能有拉伸. 二.全屏页面的自适应适配方案采用rem 方案实现自适应,可参考 https://ww ...
基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...
Vue实现音乐播放效果（适合小白学习）
Vue实现音乐播放效果(适合小白学习) 播放器介绍五个html主要标签功能介绍 (1)搜索 (2)播放效果: 完整代码: 播放器介绍总体的效果如图所示,没有加很多css特效,需要美化的小白,可以 ...
爱豆教育：亚马逊建议卖家改善服装销售图片展示效果
爱豆教育:亚马逊建议卖家改善服装销售图片展示效果 5月24日消息,亚马逊美国站公告称,内部研究表明,买家不仅喜欢看到由模特展示的服装商品,还喜欢看到各种类型的模特. #亚马逊表示,在不同体型.肤色.种 ...
vue自定义日历，vue分时间段展示价格日历
需求最近遇到一个需求,根据不同时间段展示不同价格的日历:点击详情,后台返回时间段与时间段对应的价格,前端负责相关展示后台返回数据类型: 前端展示效果: 了解开始前我们先了解下获取日期的几个必要的 ...
【Vue实用功能】Vue中实现粒子效果 particles.js
Vue中实现粒子效果为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果下载particles.j ...
css实现好看的card展示效果
实现效果:鼠标移入移出后,给card添加对应的样式,视觉上增加动态效果主要使用到 transition 与 box-shadow 这两个属性.页面实现上部分代码使用到了antDesign组件. 最下 ...
根据后台的数据设置前端页面展示效果
2019独角兽企业重金招聘Python工程师标准>>> eg1:后台数据:0:女,1:男: 前端展示效果为:男或女,而不是显示0或1 eg2:后台数据:1:模组1, 2:模组2 ...
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...

vue实现公告展示效果

效果图

代码

vue实现公告展示效果相关推荐

最新文章

热门文章