微信小程序短文字居中，長文字跑馬燈效果

Html代碼

<!-- 公告跑馬燈 -->
<view class="info_box_happy">
	<view class="info_box_happy_txt" style="width: {{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;
	width: 100%;
}
.info_box_happy_txt{
	color: red;
	width: 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)
    }
  },