小程序文字跑马灯效果


Posted in Javascript onDecember 28, 2018

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

market.wxml

<!--pages/market/market.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>

market.wxss

/* pages/market/market.wxss */
.example {
 display: block;
 width: 100%; 
 height: 100rpx;
 
} 
 
.marquee_box {
 width: 100%;
 position: relative;
 
}
 
.marquee_text {
 white-space: nowrap;
 position: absolute;
 top: 0;
 
}

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 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 #Javascript
Angular使用Restful的增删改
Dec 28 #Javascript
原生js实现公告滚动效果
Jan 10 #Javascript
微信小程序实现文字无限轮播效果
Dec 28 #Javascript
小程序实现左右来回滚动字幕效果
Dec 28 #Javascript
原生JS实现的自动轮播图功能详解
Dec 28 #Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 #jQuery
You might like
基于文本的搜索
2006/10/09 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
python学生信息管理系统
2018/03/13 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
python使用matplotlib绘制热图
2018/11/07 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
毕业生自我推荐
2013/11/04 职场文书
生产管理的三大手法
2013/11/11 职场文书
前台领班岗位职责
2013/12/04 职场文书
期中考试反思800字
2014/05/01 职场文书
中华魂演讲稿
2014/05/13 职场文书
兴趣班停课通知
2015/04/24 职场文书
新闻稿件写作范文
2015/07/18 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL