詳解微信小程序?qū)崿F(xiàn)跑馬燈效果（附完整代碼）

更新時間：2019年04月29日 09:11:45 作者：林羽凡

這篇文章主要介紹了微信小程序跑馬燈效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

在微信小程序里實現(xiàn)跑馬燈效果，類似滾動字幕或者滾動廣告之類的，使用簡單的CSS樣式控制，沒用到JS，效果如下圖：

Wxml代碼：

<!--跑馬燈 Linyufan.com-->
<view class="marquee_container" style="--marqueeWidth--:-12em">
  <view class="marquee_text">一個人活著就是為了讓更多的人更好的活著！</view>
</view>
<!--跑馬燈-->

Wxss代碼：

/*首頁跑馬燈效果*/
@keyframes around {
 from {
  margin-left: 100%;
 }
 to {
  /* var接受傳入的變量 */
  margin-left: var(--marqueeWidth--);
 }
 }
 
.marquee_container{
 background-color: #fe4655;
 height: 50rpx;
 line-height: 44rpx;
 position: relative;
 width: 100%;
 margin-top:0rpx;
}
.marquee_container:hover{
 /* 不起作用 */
 animation-play-state: paused;
}
.marquee_text{
 color:#fff;
 font-size: 28rpx;
 display: inline-block;
 white-space: nowrap;
 animation-name: around;
 animation-duration: 10s; /*過渡時間*/
 animation-iteration-count: infinite;
 animation-timing-function:linear;
}
/*首頁跑馬燈效果*/

以上所述是小編給大家介紹的微信小程序跑馬燈效果詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

JS實現(xiàn)HTML頁面中動態(tài)顯示當前時間完整示例
這篇文章主要介紹了JS實現(xiàn)HTML頁面中動態(tài)顯示當前時間,結(jié)合完整實例形式分析了JavaScript使用時間函數(shù)setTimeout及clearTimeout動態(tài)顯示當前時間相關操作技巧,非常簡單實用,需要的朋友可以參考下
2018-07-07
javascript getElementById 使用方法及用法
顧明思義，get-Element-By-Id，就是通過ID來設置/返回HTML標簽的屬性及調(diào)用其事件與方法。用這個方法基本上可以控制頁面所有標簽，條件很簡單就是給每個標簽分配一個ID號
2008-11-11
微信小程序?qū)崿F(xiàn)tab頁面切換功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)tab頁面切換功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-07-07
原生JS實現(xiàn)圓環(huán)拖拽效果
這篇文章主要為大家詳細介紹了原生JS寫一個環(huán)形的鼠標滑動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
微信小程序如何實現(xiàn)快速精確定位
騰訊位置服務為微信小程序提供了基礎的標點能力、線和圓的繪制接口等地圖組件和位置展示、地圖選點等地圖API位置服務能力支持,下面這篇文章主要給大家介紹了關于微信小程序如何實現(xiàn)快速精確定位的相關資料,需要的朋友可以參考下
2023-06-06
微信小程序修改swiper默認指示器樣式的實例代碼
這篇文章主要介紹了微信小程序修改swiper默認指示器樣式的實例代碼,代碼塊是從微信開發(fā)文檔中心復制的代碼塊，在此基礎上修改官方swiper樣式，需要的朋友可以參考下
2018-07-07
JavaScript使用Math.random()生成簡單的驗證碼
今天小編就為大家分享一篇關于JavaScript使用Math.random()生成簡單的驗證碼，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01
JS實現(xiàn)快遞單打印功能【推薦】
這篇文章主要介紹了JS實現(xiàn)快遞單打印功能,給大家介紹了js網(wǎng)頁打印的幾種方法，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-06-06
JS事件在IE與FF中的區(qū)別詳細解析
這篇文章主要是對JS事件在IE與FF中的區(qū)別進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
微信小程序開發(fā)之實現(xiàn)別踩白塊游戲
這篇文章主要為大家詳細介紹了如何通過微信小程序開發(fā)一個簡單的別踩白塊游戲，文中的示例代碼講解詳細，感興趣的小伙伴可以和小編一起學習一下
2023-02-02