小程序文字跑马灯效果


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 相关文章推荐
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
Javascript函数式编程语言
Oct 11 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 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
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
python中list列表的高级函数
2016/05/17 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
Python列表解析操作实例总结
2020/02/26 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
性能测试工程师的面试题
2015/02/20 面试题
办加油卡单位介绍信
2014/01/09 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
销售口号大全
2014/06/11 职场文书
实名检举信范文
2015/03/02 职场文书
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python