Vue實現跑馬燈簡單效果

本文例項為大家分享了實現跑馬燈簡單效果的具體程式碼，供大家參考，具體內容如下

1、跑馬燈效果

Vue實現跑馬燈簡單效果

說明：單擊"應援"按鈕文字向左飄動,再單擊"暫停"按鈕停止當前飄動

Vue實現跑馬燈簡單效果

2、完整程式碼 (注意：程式碼中需要引入vue.檔案，這個檔案自己根據目錄位置引入，具體位置程式碼中有註釋)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑馬燈</title>
    <!-- 引入vue.js檔案-->
    < 
;script src="../vue.js"></script>
 <style type="text/">
  #app{
   padding: 20px;
  }
 </style>
</head>
<body>
<div id="app">
    <button @click="run">應援</button&http://www.cppcns.comgt;
    <button @click="stop">暫停</button>
 <h3>{{msg}}</h3>
</div>
<script>
    new Vue({
        el:"#app",data:{
    www.cppcns.com 
        msg:"朋友朋友我愛你，就像老鼠愛大米~~~!",timer:null //在data上定義定時器timer，預設為null
        },methods:{
            run(){
    // 如果timer已經賦值就返回
                if(this.timer){return};
                this.timer = setInterval(() => {
     // msg分割為陣列
     var arr = this.msg.split('');
     // shift刪除並返回刪除的那個，push新增到最後
     // 把陣列第一個元素放入到最後面
     arr.push(arr.shift());
     /rJSMBW 
/ arr.join('')吧陣列連線為字串複製給msg
     this.msgwww.cppcns.com = arr.join('');
                },100)
            },stop(){
                //清除定時器
                clearInterval(this.timer);
                //清除定時器之後，需要重新將定時器置為null
                this.timer = null;
            }
        }
    })
</script>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

Vue實現跑馬燈簡單效果

Vue實現跑馬燈簡單效果

Vue實現跑馬燈效果

Js和VUE實現跑馬燈效果

Vue實現跑馬燈樣式文字橫向滾動

vue實現無縫輪播效果（跑馬燈）

android使用TextView實現跑馬燈效果

03-用基本指令實現跑馬燈效果

vue製作跑馬燈效果

vue實現全屏滾動效果（非fullpage.js）

Android自定義跑馬燈文字效果

vue實現勻速輪播效果

vue實現頁面切換滑動效果

Vue實現Tab標籤路由效果並用Animate.css做轉場動畫效果的程式碼第1/3頁

vue實現抽屜彈窗效果

vue實現廣告欄上下滾動效果

vue實現單擊選中效果

vue實現樹狀表格效果

Vue實現一種簡單的無限迴圈滾動動畫的示例

Qt實現跑馬燈移動文字視窗類

Vue實現圖片預覽效果例項（放大、縮小、拖拽）

Vue實現跑馬燈簡單效果

相關推薦