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

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

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

在微信小程序 里實(shí)現(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;
}
/*首頁跑馬燈效果*/

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

相關(guān)文章

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

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

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

    javascript getElementById 使用方法及用法

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

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

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

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

    這篇文章主要為大家詳細(xì)介紹了原生JS寫一個環(huán)形的鼠標(biāo)滑動效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    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)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • JS實(shí)現(xiàn)快遞單打印功能【推薦】

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

    這篇文章主要介紹了JS實(shí)現(xiàn)快遞單打印功能,給大家介紹了js網(wǎng)頁打印的幾種方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    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ā)一個簡單的別踩白塊游戲,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以和小編一起學(xué)習(xí)一下
    2023-02-02

最新評論