小程序文字跑马灯效果


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 相关文章推荐
JavaScript 基础篇(一)
Mar 30 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
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
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
php array_walk() 数组函数
2011/07/12 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
炫酷的js手风琴效果
2016/10/13 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
解决python写的windows服务不能启动的问题
2014/04/15 Python
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
Python中functools模块函数解析
2017/03/12 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python编写简单端口扫描器
2019/09/04 Python
python能做什么 python的含义
2019/10/12 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
Java中实现多态的机制是什么?
2014/12/07 面试题
实现向右循环移位
2014/07/31 面试题
文秘专业自荐信
2013/10/14 职场文书
卫生安全检查制度
2014/02/04 职场文书
致裁判员加油稿
2014/02/08 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
先进个人材料怎么写
2014/12/30 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
企业愿景口号
2015/12/25 职场文书