微信小程序实现跑马灯效果


Posted in Javascript onOctober 21, 2020

网上很多实现跑马灯的文章,但是很多发现都是不行的,之一就是文字宽度居然是通过字符数*文字size计算,明显是不准确的计算方式。我看了下,发现可以通过计算控件宽度来精确计算文字宽度,这样实现的跑马灯是比较完善的。

效果如下:

微信小程序实现跑马灯效果

实现代码如下:

wxml:

<view class="rollCon">
 <view class='box'> 
 <view class='text'style='left:{{offsetLeft}}px' >{{text}}</view>
</view>
</view>

wxss:

.rollCon {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 60rpx;
 z-index: 100;
 background: #fde8c7;
 font-size: 20rpx;
 line-height: 60rpx;
}

.box {
 width: 100%;
 position: relative;
}

.text {
 white-space: nowrap;
 position: absolute;
 top: 0;
 font-size: 24px;
}

js:

Page({

 /**
 * 页面的初始数据
 */
 data: {
 interval: null,
 text: '995年JavaScript诞生时如早一年',
 pace: 1.2, //滚动速度
 interval: 20, //时间间隔
 size: 24, //字体大小in px
 length: 0, //字体宽度
 offsetLeft: 0, //
 windowWidth: 0,
 },
 //根据viewId查询view的宽度
 queryViewWidth: function(viewId) {
 //创建节点选择器
 return new Promise(function(resolve) {
  var query = wx.createSelectorQuery();
  var that = this;
  query.select('.' + viewId).boundingClientRect(function(rect) {
  resolve(rect.width);
  }).exec();
 });

 },
 //停止跑马灯
 stopMarquee: function() {
 var that = this;
 //清除旧的定时器
 if (that.data != null) {
  clearInterval(that.interval);
 }
 },
 //执行跑马灯动画
 excuseAnimation: function() {
 var that = this;
 if (that.data.length > that.data.windowWidth) {
  //设置循环
  let interval = setInterval(function() {
  if (that.data.offsetLeft <= 0) {
   if (that.data.offsetLeft >= -that.data.length) {
   that.setData({
    offsetLeft: that.data.offsetLeft - that.data.pace,
   })
   } else {
   that.setData({
    offsetLeft: that.data.windowWidth,
   })
   }
  } else {
   that.setData({
   offsetLeft: that.data.offsetLeft - that.data.pace,
   })
  }
  }, that.data.interval);
 }
 },
 //开始跑马灯
 startMarquee: function() {
 var that = this;
 that.stopMarquee();
 //初始化数据
 that.data.windowWidth = wx.getSystemInfoSync().windowWidth;
 that.queryViewWidth('text').then(function(resolve) {
  that.data.length = resolve;
  console.log(that.data.length + "/" + that.data.windowWidth);
  that.excuseAnimation();
 });
 }
 })

源码下载:跑马灯效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS验证身份证有效性示例
Oct 11 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
js DOM的事件常见操作实例详解
Dec 16 Javascript
基于js实现数组相邻元素上移下移
May 19 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 #Javascript
vue.js自定义组件directives的实例代码
Nov 09 #Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 #Javascript
webpack 静态资源集中输出的方法示例
Nov 09 #Javascript
vue中如何去掉空格的方法实现
Nov 09 #Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 #Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 #Javascript
You might like
php checkbox 取值详细说明
2010/08/19 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
采购文员岗位职责
2013/11/20 职场文书
写自荐信三大法宝
2014/01/24 职场文书
军训感想500字
2014/02/20 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
计算机教师工作总结
2015/08/13 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
浅谈克隆 JavaScript
2021/11/02 Javascript
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android
Moment的feature导致线上bug解决分析
2022/09/23 Javascript