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


Posted in Javascript onMay 26, 2020

本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下

效果

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

wxml

<view>1 显示完后再显示</view>
<view class="example">
 <view class="marquee_box">
 <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
 {{text}}
 </view>
 </view>
</view>
<view>2 出现白边后即显示</view>
<view class="example">
 <view class="marquee_box">
 <view class="marquee_text" style="{{orientation}}:{{marqueeDistance2}}px;font-size: {{size}}px;">
 <text>{{text}}</text>
 <text wx:if="{{marquee2copy_status}}" style="margin-left:{{marquee2_margin}}px;">{{text}}</text>
 </view>
 </view>
</view>

wxss

.example {
 display: block;
 width: 100%;
 height: 100rpx;
}

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

.marquee_text {
 white-space: nowrap;
 position: absolute;
 top: 0;
}

js

// pages/home/marquee/marquee.js
Page({
 data: {
 text: '这是一条会滚动的文字滚来滚去的文字跑马灯,哈哈哈哈哈哈哈哈',
 marqueePace: 1,//滚动速度
 marqueeDistance: 0,//初始滚动距离
 marqueeDistance2: 0,
 marquee2copy_status: false,
 marquee2_margin: 60,
 size: 14,
 orientation: 'left',//滚动方向
 interval: 20 // 时间间隔
 },
 onShow: function () {
 // 页面显示
 var vm = this;
 var length = vm.data.text.length * vm.data.size;//文字长度
 var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
 vm.setData({
 length: length,
 windowWidth: windowWidth,
 marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin//当文字长度小于屏幕长度时,需要增加补白
 });
 vm.run1();// 水平一行字滚动完了再按照原来的方向滚动
 vm.run2();// 第一个字消失后立即从右边出现
 },
 run1: function () {
 var vm = this;
 var interval = setInterval(function () {
 if (-vm.data.marqueeDistance < vm.data.length) {
 vm.setData({
  marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace,
 });
 } else {
 clearInterval(interval);
 vm.setData({
  marqueeDistance: vm.data.windowWidth
 });
 vm.run1();
 }
 }, vm.data.interval);
 },
 run2: function () {
 var vm = this;
 var interval = setInterval(function () {
 if (-vm.data.marqueeDistance2 < vm.data.length) {
 // 如果文字滚动到出现marquee2_margin=30px的白边,就接着显示
 vm.setData({
  marqueeDistance2: vm.data.marqueeDistance2 - vm.data.marqueePace,
  marquee2copy_status: vm.data.length + vm.data.marqueeDistance2 <= vm.data.windowWidth + vm.data.marquee2_margin,
 });
 } else {
 if (-vm.data.marqueeDistance2 >= vm.data.marquee2_margin) { // 当第二条文字滚动到最左边时
  vm.setData({
  marqueeDistance2: vm.data.marquee2_margin // 直接重新滚动
  });
  clearInterval(interval);
  vm.run2();
 } else {
  clearInterval(interval);
  vm.setData({
  marqueeDistance2: -vm.data.windowWidth
  });
  vm.run2();
 }
 }
 }, vm.data.interval);
 }
})

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

Javascript 相关文章推荐
js 调整select 位置的函数
Feb 21 Javascript
JavaScript的eval JSON object问题
Nov 15 Javascript
jquery tab标签页的制作
May 10 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
浅谈JS的原型和继承
May 08 Javascript
微信小程序实现滚动消息通知
Feb 02 #Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 #Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 #Javascript
vuex的简单使用教程
Feb 02 #Javascript
详解VueJS应用中管理用户权限
Feb 02 #Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 #Javascript
使用express+multer实现node中的图片上传功能
Feb 02 #Javascript
You might like
php生成随机密码的三种方法小结
2010/09/04 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
Python中字符串的常见操作技巧总结
2016/07/28 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
What is EJB
2016/07/22 面试题
本科生职业生涯规划书范文
2014/01/21 职场文书
一年级数学教学反思
2014/02/01 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
个人党性分析材料
2014/12/19 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技