国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

單行文字向上滾動(dòng)

lx1036 / 3079人閱讀

摘要：最近在做一個(gè)活動(dòng)頁(yè)，需要一個(gè)單行文字向上滾動(dòng)的效果來(lái)展示獲獎(jiǎng)公告。效果如下廢話不多說(shuō)，下面直接貼上代碼。

最近在做一個(gè)活動(dòng)頁(yè)，需要一個(gè)單行文字向上滾動(dòng)的效果來(lái)展示獲獎(jiǎng)公告。

效果如下：


廢話不多說(shuō)，下面直接貼上代碼。

html代碼如下：
 

   
   

     
    
       
  • {{item.phone}}抽中{{item.prizeName}}
    • 
       
  • {{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}
    • 
       
  • {{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}
    • 
       
  • 獲獎(jiǎng)公告
    • 
     

   

 
less代碼如下：
 .notice{
     display: flex;
     justify-content: center;
     padding-bottom: .26rem;
     img{
       width: .3rem;
       height: .24rem;
     }
     .wrap{
       position: relative;
       height:.3rem;
       overflow: hidden;
       margin-left: .15rem;
       font-size: .24rem;
       color: #391b03;
     }
     ul{
       position: relative;
       top: -.3rem;
       li{
         height: .3rem;
         line-height: .3rem;
       }
     }
     .transitionTop{
       transition: top 200ms ease-in-out;
     }
 }
js代碼如下：
 // data下
 noticeTop: 0, // 公告top值
 isActive:true, // 是否顯示transitionTop動(dòng)畫(huà)
 timer: null, // 公告滾動(dòng)定時(shí)器
 noticeList: [
   {
     phone:"135****1234",
     prizeName:"50元還款券"
   },
   {
     phone:"135****1234",
     prizeName:"60元還款券"
   },
   {
     phone:"135****1234",
     prizeName:"70元還款券"
   }
 ], // 公告列表
 
 // computed下
 noticeLen(){ // 公告列表長(zhǎng)度
     return this.noticeList.length;
 }
 //methods下
 noticeScroll(){// 公告滾動(dòng)，定時(shí)改變公告的top值
     if(this.noticeLen > 0){
       let index =1,
           len = this.noticeLen === 1 ? 3 : (this.noticeLen + 1);
       this.timer = setInterval(() => {
         this.isActive = true;
         this.noticeTop = -3 * index / 10;
         index ++;
         if(index === len){// 滾動(dòng)到底部時(shí)返回
           let delayTime = setTimeout(() => {
             this.isActive = false;
             this.noticeTop = 0;
             index = 1;
             clearTimeout(delayTime);
           }, 1000);
         }
       }, 3000);
     }
 }
 //調(diào)用
 this.noticeScroll();
需要說(shuō)明的是：
1.項(xiàng)目是基于vue的語(yǔ)法
2.滾動(dòng)到底部返回時(shí)加了個(gè)延遲，是為了能滾動(dòng)到最后一個(gè)，然后從最后一個(gè)返回到第一個(gè)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/113627.html

相關(guān)文章

  • 單行文字向上滾動(dòng)

    摘要：最近在做一個(gè)活動(dòng)頁(yè)，需要一個(gè)單行文字向上滾動(dòng)的效果來(lái)展示獲獎(jiǎng)公告。效果如下廢話不多說(shuō)，下面直接貼上代碼。 最近在做一個(gè)活動(dòng)頁(yè)，需要一個(gè)單行文字向上滾動(dòng)的效果來(lái)展示獲獎(jiǎng)公告。 效果如下： showImg(https://segmentfault.com/img/bVbeP8b?w=314&h=60); 廢話不多說(shuō)，下面直接貼上代碼。 html代碼如下： ...

    AlienZHOU 評(píng)論0 收藏0

  • 單行文字向上滾動(dòng)

    摘要：最近在做一個(gè)活動(dòng)頁(yè)，需要一個(gè)單行文字向上滾動(dòng)的效果來(lái)展示獲獎(jiǎng)公告。效果如下廢話不多說(shuō)，下面直接貼上代碼。 最近在做一個(gè)活動(dòng)頁(yè)，需要一個(gè)單行文字向上滾動(dòng)的效果來(lái)展示獲獎(jiǎng)公告。 效果如下： showImg(https://segmentfault.com/img/bVbeP8b?w=314&h=60); 廢話不多說(shuō)，下面直接貼上代碼。 html代碼如下： ...

    yuanzhanghu 評(píng)論0 收藏0

  • 單行文字垂直/水平跑馬燈效果

    摘要：需求描述接到的需求是這樣的跑馬燈效果一次展示一行文字循環(huán)滾動(dòng)文字滾動(dòng)到視野中停留一秒后滾出。 需求描述 接到的需求是這樣的：跑馬燈效果 一次展示一行文字 循環(huán)滾動(dòng) 文字滾動(dòng)到視野中停留一秒后滾出。靜態(tài)效果如下圖，文字從下往上或者從右往左滾動(dòng)，滾動(dòng)到此位置時(shí)停留一秒（不會(huì)傳動(dòng)圖...showImg(https://segmentfault.com/img/bVbbZ3v?w=700&h=...

    muzhuyu 評(píng)論0 收藏0

  • js信息滾動(dòng)

    摘要：信息滾動(dòng)效果學(xué)習(xí)函數(shù)實(shí)現(xiàn)信息滾動(dòng)相關(guān)知識(shí)點(diǎn)滾動(dòng)的方式表示在兩端之間來(lái)回滾動(dòng)。表示由一端滾動(dòng)到另一端，會(huì)重復(fù)。間歇性向上滾動(dòng)效果展示將樣式中的盒子高度設(shè)置成單行高本例為則顯示一行，并間歇性向上滾動(dòng)，效果展示 信息滾動(dòng)效果學(xué)習(xí) marquee函數(shù)實(shí)現(xiàn)信息滾動(dòng) 相關(guān)知識(shí)點(diǎn)： 1.behavior滾動(dòng)的方式 alternate:表示在兩端之間來(lái)回滾動(dòng)。 scroll:表示由一端滾動(dòng)到另一端，會(huì)...

    蘇丹 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<