资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/单行文字向上滚动

单行文字向上滚动

lx1036 / 3118人阅读

摘要：最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。效果如下废话不多说，下面直接贴上代码。

</>复制代码 
  1. 最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。
  2. 效果如下：

</>复制代码 
  1. 废话不多说，下面直接贴上代码。
</>复制代码 
  1. html代码如下：
</>复制代码 
  1.  
  2.    
  3.    
  4.      
    •        
    • {{item.phone}}抽中{{item.prizeName}}
    •        
    • {{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}
    •        
    • {{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}
    •        
    • 获奖公告
    •      
  5.    
  6.  
</>复制代码 
  1. less代码如下：
</>复制代码 
  1.  .notice{
  2.      display: flex;
  3.      justify-content: center;
  4.      padding-bottom: .26rem;
  5.      img{
  6.        width: .3rem;
  7.        height: .24rem;
  8.      }
  9.      .wrap{
  10.        position: relative;
  11.        height:.3rem;
  12.        overflow: hidden;
  13.        margin-left: .15rem;
  14.        font-size: .24rem;
  15.        color: #391b03;
  16.      }
  17.      ul{
  18.        position: relative;
  19.        top: -.3rem;
  20.        li{
  21.          height: .3rem;
  22.          line-height: .3rem;
  23.        }
  24.      }
  25.      .transitionTop{
  26.        transition: top 200ms ease-in-out;
  27.      }
  28.  }
</>复制代码 
  1. js代码如下：
</>复制代码 
  1.  // data下
  2.  noticeTop: 0, // 公告top值
  3.  isActive:true, // 是否显示transitionTop动画
  4.  timer: null, // 公告滚动定时器
  5.  noticeList: [
  6.    {
  7.      phone:"135****1234",
  8.      prizeName:"50元还款券"
  9.    },
  10.    {
  11.      phone:"135****1234",
  12.      prizeName:"60元还款券"
  13.    },
  14.    {
  15.      phone:"135****1234",
  16.      prizeName:"70元还款券"
  17.    }
  18.  ], // 公告列表
  19.  
  20.  // computed下
  21.  noticeLen(){ // 公告列表长度
  22.      return this.noticeList.length;
  23.  }
  24.  //methods下
  25.  noticeScroll(){// 公告滚动，定时改变公告的top值
  26.      if(this.noticeLen > 0){
  27.        let index =1,
  28.            len = this.noticeLen === 1 ? 3 : (this.noticeLen + 1);
  29.        this.timer = setInterval(() => {
  30.          this.isActive = true;
  31.          this.noticeTop = -3 * index / 10;
  32.          index ++;
  33.          if(index === len){// 滚动到底部时返回
  34.            let delayTime = setTimeout(() => {
  35.              this.isActive = false;
  36.              this.noticeTop = 0;
  37.              index = 1;
  38.              clearTimeout(delayTime);
  39.            }, 1000);
  40.          }
  41.        }, 3000);
  42.      }
  43.  }
  44.  //调用
  45.  this.noticeScroll();
</>复制代码 
  1. 需要说明的是：
  2. 1.项目是基于vue的语法
  3. 2.滚动到底部返回时加了个延迟，是为了能滚动到最后一个，然后从最后一个返回到第一个。
云服务器 GPU云服务器 js移动端向上滚动刷新数据 html文字向上换行 文字滚动 文字垂直滚动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113627.html

相关文章

  • 单行文字向上滚动

    摘要：最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。效果如下废话不多说，下面直接贴上代码。 最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。 效果如下： showImg(https://segmentfault.com/img/bVbeP8b?w=314&h=60); 废话不多说，下面直接贴上代码。 html代码如下： ...

    AlienZHOU 评论0 收藏0

  • 单行文字向上滚动

    摘要：最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。效果如下废话不多说，下面直接贴上代码。 最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。 效果如下： showImg(https://segmentfault.com/img/bVbeP8b?w=314&h=60); 废话不多说，下面直接贴上代码。 html代码如下： ...

    yuanzhanghu 评论0 收藏0

  • 单行文字垂直/水平跑马灯效果

    摘要：需求描述接到的需求是这样的跑马灯效果一次展示一行文字循环滚动文字滚动到视野中停留一秒后滚出。 需求描述 接到的需求是这样的：跑马灯效果 一次展示一行文字 循环滚动 文字滚动到视野中停留一秒后滚出。静态效果如下图，文字从下往上或者从右往左滚动，滚动到此位置时停留一秒（不会传动图...showImg(https://segmentfault.com/img/bVbbZ3v?w=700&h=...

    muzhuyu 评论0 收藏0

  • js信息滚动

    摘要：信息滚动效果学习函数实现信息滚动相关知识点滚动的方式表示在两端之间来回滚动。表示由一端滚动到另一端，会重复。间歇性向上滚动效果展示将样式中的盒子高度设置成单行高本例为则显示一行，并间歇性向上滚动，效果展示 信息滚动效果学习 marquee函数实现信息滚动 相关知识点： 1.behavior滚动的方式 alternate:表示在两端之间来回滚动。 scroll:表示由一端滚动到另一端，会...

    苏丹 评论0 收藏0

发表评论

登陆后可评论

0条评论

lx1036

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<