网站建设策划书论文,企业管理咨询公司怎么样,网页制作处理软件中的三剑客是指,龙岩市建筑设计院Vue 实现跑马灯的效果。
效果图 **功能讲解#xff1a;**当点击开始按钮#xff0c;跑马灯效果开始进行#xff0c;文字滚动消失和显示#xff0c;循环滚动#xff0c;点击停止按钮#xff0c;文字不再滚动#xff0c;停留在当时显示的文字页面。
代码演示
!DOC…Vue 实现跑马灯的效果。
效果图 **功能讲解**当点击开始按钮跑马灯效果开始进行文字滚动消失和显示循环滚动点击停止按钮文字不再滚动停留在当时显示的文字页面。
代码演示
!DOCTYPE htmlhtmlheadmeta charsetUTF-8titleTitle/titlescript srchttps://unpkg.com/vue/dist/vue.js/scriptstyle[v-cloak]{display: none;}/style/headbodydiv iddiv1input typebutton value开始 idbtn1 clickbegininput typebutton value停止 idbtn2 clickstopbrh4{{msg}}/h4/div/bodyscriptvar wm new Vue({el: #div1,data: {msg: 今天阳光明媚操场风筝漫天大眼成群飞过,intervalId: null},methods: {begin() {if (this.intervalId ! null) return;this.intervalId setInterval(() {var start this.msg.substring(0, 1);var end this.msg.substring(1);this.msg end start;}, 400)},stop() {clearInterval(this.intervalId);this.intervalId null;}}})/script
/html
扫一扫关注我的公众号获取更多资讯呦
