資訊專欄INFORMATION COLUMN
摘要：最近在做一個活動頁，需要一個單行文字向上滾動的效果來展示獲獎公告。效果如下廢話不多說，下面直接貼上代碼。
最近在做一個活動頁，需要一個單行文字向上滾動的效果來展示獲獎公告。 效果如下：
廢話不多說，下面直接貼上代碼。
html代碼如下：
- {{item.phone}}抽中{{item.prizeName}}
- {{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}
- {{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}
- 獲獎公告
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動畫
timer: null, // 公告滾動定時器
noticeList: [
{
phone:"135****1234",
prizeName:"50元還款券"
},
{
phone:"135****1234",
prizeName:"60元還款券"
},
{
phone:"135****1234",
prizeName:"70元還款券"
}
], // 公告列表
// computed下
noticeLen(){ // 公告列表長度
return this.noticeList.length;
}
//methods下
noticeScroll(){// 公告滾動，定時改變公告的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){// 滾動到底部時返回
let delayTime = setTimeout(() => {
this.isActive = false;
this.noticeTop = 0;
index = 1;
clearTimeout(delayTime);
}, 1000);
}
}, 3000);
}
}
//調(diào)用
this.noticeScroll();
需要說明的是： 1.項(xiàng)目是基于vue的語法 2.滾動到底部返回時加了個延遲，是為了能滾動到最后一個，然后從最后一個返回到第一個。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/96612.html
摘要：最近在做一個活動頁，需要一個單行文字向上滾動的效果來展示獲獎公告。效果如下廢話不多說，下面直接貼上代碼。 最近在做一個活動頁，需要一個單行文字向上滾動的效果來展示獲獎公告。 效果如下： showImg(https://segmentfault.com/img/bVbeP8b?w=314&h=60); 廢話不多說，下面直接貼上代碼。 html代碼如下： ...
摘要：需求描述接到的需求是這樣的跑馬燈效果一次展示一行文字循環(huán)滾動文字滾動到視野中停留一秒后滾出。 需求描述 接到的需求是這樣的：跑馬燈效果 一次展示一行文字 循環(huán)滾動 文字滾動到視野中停留一秒后滾出。靜態(tài)效果如下圖，文字從下往上或者從右往左滾動，滾動到此位置時停留一秒（不會傳動圖...showImg(https://segmentfault.com/img/bVbbZ3v?w=700&h=...
摘要：信息滾動效果學(xué)習(xí)函數(shù)實(shí)現(xiàn)信息滾動相關(guān)知識點(diǎn)滾動的方式表示在兩端之間來回滾動。表示由一端滾動到另一端，會重復(fù)。間歇性向上滾動效果展示將樣式中的盒子高度設(shè)置成單行高本例為則顯示一行，并間歇性向上滾動，效果展示 信息滾動效果學(xué)習(xí) marquee函數(shù)實(shí)現(xiàn)信息滾動 相關(guān)知識點(diǎn)： 1.behavior滾動的方式 alternate:表示在兩端之間來回滾動。 scroll:表示由一端滾動到另一端，會...
閱讀 2080·2021-11-24 10:34
閱讀 3055·2021-11-22 11:58
閱讀 3712·2021-09-28 09:35
閱讀 1724·2019-08-30 15:53
閱讀 2770·2019-08-30 14:11
閱讀 1551·2019-08-29 17:31
閱讀 542·2019-08-26 13:53
閱讀 2141·2019-08-26 13:45
