微信小程序短文字居中，长文字跑马灯效果

Html代码

<!-- 公告跑马灯 -->
<view class="info_box_happy">
	<view class="info_box_happy_txt" style=" {{textW}}px;margin-left: {{textL}}px">{{textN}}</view>
</view>

Css代码

.info_box_happy{
	font-size: 12px;
	color: #333;
	white-space : nowrap;
	padding: 10rpx 3rpx;
	background: #fff;
	border-bottom: 2rpx #f5f5f5 solid;
	position: relative;
	overflow: hidden;
	 100%;
}
.info_box_happy_txt{
	color: red;
	 100%;
	position: relative;
}

Js代码

page{
    textM:0,
    textN:'元旦快乐！元旦快乐！元旦快乐！元旦快乐！',
    textW:0,
    textL:50,  
}
  onLoad: function (options) {
    var that = this;
    var textM = 20;
    //获取屏幕宽度的封装方法
    var phoneWidth = util.nowPhoneWH()[0];
    //文字宽度=文字长度+字体大小
    var textW = parseInt(Number(that.data.textN.length)*12);
    that.setData({textW:textW,textL:phoneWidth});
    if(phoneWidth>textW){
      var centerL = Number(phoneWidth/2)-(Number(textW)/2)
      that.setData({textL:centerL});
    }else{
      var textTime = setInterval(function(){
        var textL = that.data.textL;
        if(textL<-(textW-20)){
          that.setData({textL:phoneWidth})
          return
        }
        textL-=2;
        that.setData({textL:textL})
      },30)
    }
  },