小程序实现跑马灯效果_javascript技巧_

               {{text}}        

/* 跑马灯效果 */ .example {   display: block;   width: 100%;   height: 70rpx;   background-color: #f2f2f2;   line-height: 70rpx; } .marquee_box {   width: 100%;   position: relative; } .marquee_text {   white-space: nowrap;   position: absolute;   top: 0;   display: flex;   flex-direction: row; } .ad-image {   width: 40rpx;   height: 40rpx;   margin-right: 10rpx;   margin-top: 15rpx; }

// pages/home/home.js var app = getApp() Page({   data: {     //跑马灯     text: '618淘甄貨,一个可以省钱的购物平台',     marqueePace: 1,//滚动速度     marqueeDistance: 0,//初始滚动距离     size: 14,     orientation: 'left',//滚动方向     intervals: 20, // 时间间隔     adUrl: '../../images/detail/like.jpeg'   },   onShow: function () {     // 页面显示     var that = this;     var length = that.data.text.length * that.data.size;//文字长度     var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度     that.setData({       length: length,       windowWidth: windowWidth,     });     that.runMarquee();// 水平一行字滚动完了再按照原来的方向滚动   },   runMarquee: function () {     var that = this;     var interval = setInterval(function () {       //文字一直移动到末端       if (-that.data.marqueeDistance < that.data.length) {         that.setData({           marqueeDistance: that.data.marqueeDistance - that.data.marqueePace,         });       } else {         clearInterval(interval);         that.setData({           marqueeDistance: that.data.windowWidth         });         that.runMarquee();       }     }, that.data.intervals);   } })