欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2019年04月29日 09:11:45   作者：林羽凡  
這篇文章主要介紹了微信小程序跑馬燈效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

Wxml代碼：

<!--跑馬燈 Linyufan.com-->
<view class="marquee_container" style="--marqueeWidth--:-12em">
  <view class="marquee_text">一個(gè)人活著就是為了讓更多的人更好的活著！</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; /*過渡時(shí)間*/
 animation-iteration-count: infinite;
 animation-timing-function:linear;
}
/*首頁跑馬燈效果*/

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

相關(guān)文章

  • JS實(shí)現(xiàn)HTML頁面中動態(tài)顯示當(dāng)前時(shí)間完整示例

    JS實(shí)現(xiàn)HTML頁面中動態(tài)顯示當(dāng)前時(shí)間完整示例

    這篇文章主要介紹了JS實(shí)現(xiàn)HTML頁面中動態(tài)顯示當(dāng)前時(shí)間,結(jié)合完整實(shí)例形式分析了JavaScript使用時(shí)間函數(shù)setTimeout及clearTimeout動態(tài)顯示當(dāng)前時(shí)間相關(guān)操作技巧,非常簡單實(shí)用,需要的朋友可以參考下
    2018-07-07
  • javascript getElementById 使用方法及用法

    javascript getElementById 使用方法及用法

    顧明思義，get-Element-By-Id，就是通過ID來設(shè)置/返回HTML標(biāo)簽的屬性及調(diào)用其事件與方法。用這個(gè)方法基本上可以控制頁面所有標(biāo)簽，條件很簡單就是給每個(gè)標(biāo)簽分配一個(gè)ID號
    2008-11-11
  • 微信小程序?qū)崿F(xiàn)tab頁面切換功能

    微信小程序?qū)崿F(xiàn)tab頁面切換功能

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)tab頁面切換功能,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2018-07-07
  • 原生JS實(shí)現(xiàn)圓環(huán)拖拽效果

    原生JS實(shí)現(xiàn)圓環(huán)拖拽效果

    這篇文章主要為大家詳細(xì)介紹了原生JS寫一個(gè)環(huán)形的鼠標(biāo)滑動效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-04-04
  • 微信小程序如何實(shí)現(xiàn)快速精確定位

    微信小程序如何實(shí)現(xiàn)快速精確定位

    騰訊位置服務(wù)為微信小程序提供了基礎(chǔ)的標(biāo)點(diǎn)能力、線和圓的繪制接口等地圖組件和位置展示、地圖選點(diǎn)等地圖API位置服務(wù)能力支持,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)快速精確定位的相關(guān)資料,需要的朋友可以參考下
    2023-06-06
  • 微信小程序修改swiper默認(rèn)指示器樣式的實(shí)例代碼

    微信小程序修改swiper默認(rèn)指示器樣式的實(shí)例代碼

    這篇文章主要介紹了微信小程序修改swiper默認(rèn)指示器樣式的實(shí)例代碼,代碼塊是從微信開發(fā)文檔中心復(fù)制的代碼塊，在此基礎(chǔ)上修改官方swiper樣式，需要的朋友可以參考下
    2018-07-07
  • JavaScript使用Math.random()生成簡單的驗(yàn)證碼

    JavaScript使用Math.random()生成簡單的驗(yàn)證碼

    今天小編就為大家分享一篇關(guān)于JavaScript使用Math.random()生成簡單的驗(yàn)證碼，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • JS實(shí)現(xiàn)快遞單打印功能【推薦】

    JS實(shí)現(xiàn)快遞單打印功能【推薦】

    這篇文章主要介紹了JS實(shí)現(xiàn)快遞單打印功能,給大家介紹了js網(wǎng)頁打印的幾種方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2018-06-06
  • JS事件在IE與FF中的區(qū)別詳細(xì)解析

    JS事件在IE與FF中的區(qū)別詳細(xì)解析

    這篇文章主要是對JS事件在IE與FF中的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2013-11-11
  • 微信小程序開發(fā)之實(shí)現(xiàn)別踩白塊游戲

    微信小程序開發(fā)之實(shí)現(xiàn)別踩白塊游戲

    這篇文章主要為大家詳細(xì)介紹了如何通過微信小程序開發(fā)一個(gè)簡單的別踩白塊游戲，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下
    2023-02-02

最新評論