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


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 相关文章推荐
javascript Demo模态窗口
Dec 06 Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
Nuxt使用Vuex的方法示例
Sep 06 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简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python 代码性能优化技巧分享
2012/08/07 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
Python 打印中文字符的三种方法
2018/08/14 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
Python字典实现伪切片功能
2020/10/28 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
美国温暖商店:The Warming Store
2018/12/15 全球购物
C#公司笔试题
2014/03/28 面试题
计算机应用毕业生自荐信
2013/10/23 职场文书
QA工程师岗位职责
2013/11/20 职场文书
餐饮主管岗位职责
2013/12/10 职场文书
融资合作协议书范本
2014/10/17 职场文书
解除施工合同协议书
2014/10/17 职场文书
婚前协议书标准版
2014/10/19 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
MySQL GTID复制的具体使用
2022/05/20 MySQL