小程序文字跑马灯效果


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 相关文章推荐
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
javascript实现标签切换代码示例
May 22 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
JS实现带动画的回到顶部效果
Dec 28 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
php字符串截取函数用法分析
2014/11/25 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
php实现微信支付之退款功能
2018/05/30 PHP
php中yii框架实例用法
2020/12/22 PHP
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
JS交换变量的方法
2015/01/21 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
涨价通知怎么写
2015/04/23 职场文书
协议书格式模板
2016/03/24 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle