小程序跑马灯 css实现

最新推荐文章于 2023-04-21 16:32:19 发布

一闪一闪亮晶晶，漫天都是小星星

最新推荐文章于 2023-04-21 16:32:19 发布

阅读量288

点赞数

分类专栏：小程序文章标签：小程序 css 前端

本文链接：https://blog.csdn.net/assassin_0302/article/details/128817269

版权

小程序专栏收录该内容

35 篇文章 0 订阅

订阅专栏

.notice-text{
  overflow: hidden;
  white-space: nowrap;
}

.marqueeText_style {
  -webkit-animation: marqueeText 5s linear 1s infinite;
  animation: marqueeText 5s linear 1s infinite;
  white-space: nowrap;
}
 
@keyframes marqueeText {
  from {
    text-indent:0%;
  }
  to {
    text-indent:-200%;
  }
  /* from {
      transform: translateX(0%);
      -webkit-transform: translateX(0%);
  }
  to {
      transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
  } */
}

js中textWidth=文字长度*文字大小（我是40rpx的字号，所以填了20）

 getSwiperWidth(){
    const that = this
    var obj = wx.createSelectorQuery();
      obj.select('.playInfo').boundingClientRect(function (rect) {
        if(rect){
          const textWidth = that.data.currentActivity.themeName.length * 20
          const swiperWidth = rect.width
          console.log('textWidth > swiperWidth?',textWidth , swiperWidth);
          that.setData({
            hasMarquee: textWidth > swiperWidth ? true : false
          })
        }
    })
    obj.exec() ;
  },

html：