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


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 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
python实现kmp算法的实例代码
2019/04/03 Python
Python GUI编程完整示例
2019/04/04 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
夫妻忠诚协议书范本
2014/11/17 职场文书
实习指导教师评语
2014/12/30 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
入党转正申请书范文
2019/05/20 职场文书
高考升学宴主持词
2019/06/21 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android