如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人。谢谢大家!❤

如果解决不了,可以在文末进群交流。

基于CSS3主要代码实现

效果图:

视图模板wxml中:

<view class="marquee_container" style="--marqueeWidth--:-12em">
<view class="marquee_text">测试跑马灯效果</view>
</view>

样式wxss中:

@keyframes around {
from {
margin-left: 100%;
}
to {
/* var接受传入的变量 */
margin-left: var(--marqueeWidth--);
}
} .marquee_container{
background-color: #000;
height: 40rpx;
line-height: 40rpx;
position: relative;
width: 100%;
}
.marquee_container:hover{
/* 不起作用 */
animation-play-state: paused;
}
.marquee_text{
color:#b4b4b4;
font-size: 28rpx;
display: inline-block;
white-space: nowrap;
animation-name: around;
animation-duration: 10s; /*过渡时间*/
animation-iteration-count: infinite;
animation-timing-function:linear;
}

基于JS主要代码实现:

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代码:

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);
}
});

废话不多说了,直接上代码,不懂地方可留言,或者进微信群内交流。群二维码如果过期,请加我微信:mengyilingjian.

微信小程序跑马灯效果--基于CSS3 animation 及 基于JS的更多相关文章

  1. 微信小程序把玩(四十)animation API

    原文:微信小程序把玩(四十)animation API 动画水还是比较深的,这里只是简单介绍下小程序中动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入. w ...

  2. 微信小程序从零开始开发步骤(七)引入外部js 文件

    上一章讲到小程序页面的四种常见的跳转的方法,这一章写如何引入一个外部的js文件,既utils文件夹的用处,其实步骤很简单: 1:准备好外部想要引入的外部文件,命名为util.js,并且填充固定的文件内 ...

  3. VUE小案例--跑马灯效果

    自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

  4. 微信小程序的动画效果

    前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是 ...

  5. 微信小程序image组件binderror使用例子(对应html、js中的onerror)

    官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...

  6. 微信小程序之楼层效果

    今天做了一个小程序实现一个楼层效果  带大家分享下经验和api的使用吧 如图 将左边和右边各分了一个组件  目录如下 其中list页面是这个楼层效果的页面 components是组成这个页面的两个组件 ...

  7. Vue 小实例 跑马灯效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 微信小程序单个倒计时效果

    var end_time = grouponList.expire_time.replace(/-/g, '/') grouponcountdown(that, end_time) //适用于商品列表 ...

  9. 微信小程序 div选中效果

    ._left{ position: relative; margin-top: 40rpx; width: 40%; height: 350rpx; border-radius: 12rpx; tex ...

随机推荐

  1. PHP 基于 Jenkins ansible 动态选择版本进行自动化部署与回滚(第二版)

    PHP 基于 Jenkins ansible 动态选择版本进行自动化部署与回滚(第二版) 先看流程图: 大概介绍一下: 版本选择使用jenkins 中的 git parameter 插件实现 回滚方式 ...

  2. ELK 部署文档

    1. 前言 在日常运维工作中,对于系统和业务日志的处理尤为重要.尤其是分布式架构,每个服务都会有很多节点,如果要手工一个一个的去取日志,运维怕是要累死. 简单介绍: ELK 是 elasticsear ...

  3. Swift编码总结4

    1.swift @discardableResult 声明: swift正常的方法如果有返回值的话,调用的时候必须有一个接收方,否则的话编译器会报一个警告,如果在方法前加上 @discardableR ...

  4. 主机与虚拟机Oracle VM VirtualBox不能拖动复制的解决办法

    先将虚拟机系统关机,然后打开Oracle VM VirtualBox管理器: 第一步: 常规高级里共享粘贴板已经选中双向 第二步: 虚拟机设置-存储-控制器SATA(或IDE)-勾选"使用主 ...

  5. Spring中的@ImportResource

    简介 这个注解很简单,就是导入spring的xml配置文件 直接来看spring官方文档: In applications where @Configuration classes are the p ...

  6. 07 Mybatis的多表查询1----1对多和多对1---@Results注解用法总结

    1.表与表之间的关系及其举例 表之间的关系有4种:一对多.多对一.一对一.多对多. 举例: (1)用户和订单就是一对多 一个用户可以下多个订单 (2)订单和用户就是多对一 多个订单属于同一个用户 (3 ...

  7. 常见的几种异常类型 Exception

    常见异常类型:Java中的异常分为两大类: 1.Checked Exception(非Runtime Exception) 2.Unchecked Exception(Runtime Exceptio ...

  8. ERP通过JAVA流的形式将数据传到外围系统

    1.ERP封装数据成XML写入数据库服务器指定文件 --指定相关文件信息 v_file_path := '/u01/test/app/fs1/EBSapps/appl/cux/12.0.0/forms ...

  9. Java开发笔记(一百零六)Fork+Join框架实现分而治之

    前面依次介绍了普通线程池和定时器线程池的用法,这两种线程池有个共同点,就是线程池的内部线程之间并无什么关联,然而某些情况下的各线程间存在着前因后果关系.譬如人口普查工作,大家都知道我国总人口为14亿左 ...

  10. 【LEETCODE】42、922. Sort Array By Parity II

    package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array * ...