摘要:在昨天發布完文章之后又整理一下,發現有幾處需要改進的地方,今天就及時更新一下,也算是激勵自己要保持這種積極的好習慣項目環境,請自行配置好相應的,環境及路由,這里主要介紹實現的方法第一步在模板中使用方法循環出消息列表馬云雷軍王勤因為在消息
在昨天發布完文章之后又整理一下,發現有幾處需要改進的地方,今天就及時更新一下,也算是激勵自己要保持這種積極的好習慣
項目環境vue-cli ,請自行配置好相應的,環境及路由,這里主要介紹實現的方法
第一步在模板中 使用v-for方法循環出消息列表
export default { data() { return { animate:false, items:[ {name:"馬云"}, {name:"雷軍"}, {name:"王勤"} ] } }, created(){ setInterval(this.scroll,1000) }, methods: { scroll(){ this.animate=true; // 因為在消息向上滾動的時候需要添加css3過渡動畫,所以這里需要設置true setTimeout(()=>{ // 這里直接使用了es6的箭頭函數,省去了處理this指向偏移問題,代碼也比之前簡化了很多 this.items.push(this.items[0]); // 將數組的第一個元素添加到數組的 this.items.shift(); //刪除數組的第一個元素 this.animate=false; // margin-top 為0 的時候取消過渡動畫,實現無縫滾動 },500) } }
}
樣式設置
*{ margin: 0 ; padding: 0; } #box{ width: 300px; height: 32px; overflow: hidden; padding-left: 30px; border: 1px solid black; } .anim{ transition: all 0.5s; margin-top: -30px; } #con1 li{ list-style: none; line-height: 30px; height: 30px; }
以上就是這篇文章的全部內容,希望對大家有幫助,也請多多指教,謝謝!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/90176.html
摘要:先初始化一下默認樣式單行顯示,超出隱藏固定公告欄顯示區域的高度以下為了單行顯示,超出隱藏封裝函數使用方法改變列表的值來實現滾動效果知識點回調函數函數執行完之后,要執行的函數。 需求 最近項目中需要實現公告欄滾動顯示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解決方案 1、 HTML 先建一個div層作為公告...
摘要:先初始化一下默認樣式單行顯示,超出隱藏固定公告欄顯示區域的高度以下為了單行顯示,超出隱藏封裝函數使用方法改變列表的值來實現滾動效果知識點回調函數函數執行完之后,要執行的函數。 需求 最近項目中需要實現公告欄滾動顯示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解決方案 1、 HTML 先建一個div層作為公告...
摘要:先初始化一下默認樣式單行顯示,超出隱藏固定公告欄顯示區域的高度以下為了單行顯示,超出隱藏封裝函數使用方法改變列表的值來實現滾動效果知識點回調函數函數執行完之后,要執行的函數。 需求 最近項目中需要實現公告欄滾動顯示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解決方案 1、 HTML 先建一個div層作為公告...
摘要:寫插件的初衷項目經常需要無縫滾動效果,當時寫的時候用用這個老插件,相對不上很好用。后來轉向在沒有找到好的無縫滾動插件,除了配置可以實現但是相對來說太重了,于是自己造了個輪子。 寫插件的初衷 1.項目經常需要無縫滾動效果,當時寫jq的時候用用msClass這個老插件,相對不上很好用。2.后來轉向vue在vue-awesome沒有找到好的無縫滾動插件,除了配置swiper可以實現但是相對來...
摘要:利用中間件實現異步請求,實現兩個用戶角色實時通信。目前還未深入了解的一些概念。往后會寫更多的前后臺聯通的項目。刪除分組會連同組內的所有圖片一起刪除。算是對自己上次用寫后臺的一個強化,項目文章在這里。后來一直沒動,前些日子才把后續的完善。 歡迎訪問我的個人網站:http://www.neroht.com/? 剛學vue和react時,利用業余時間寫的關于這兩個框架的訓練,都相對簡單,有的...
閱讀 1586·2021-09-26 09:46
閱讀 2672·2021-09-07 09:59
閱讀 2758·2021-09-07 09:59
閱讀 1878·2019-08-30 14:20
閱讀 932·2019-08-26 13:39
閱讀 3181·2019-08-26 12:24
閱讀 778·2019-08-26 11:55
閱讀 1220·2019-08-23 16:49