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


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检测客户端不是firefox则提示下载
Apr 07 Javascript
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 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
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
PHP URL路由类实例
2013/11/12 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python3编码问题汇总
2016/09/06 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
办公室保洁员岗位职责
2013/12/02 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
学生党员公开承诺书
2014/05/28 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
团员个人总结
2015/02/26 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python