微信小程序跑马灯效果--基于CSS3 animation 及 基于JS
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人。谢谢大家!❤
如果解决不了,可以在文末进群交流。
基于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的更多相关文章
- 微信小程序把玩(四十)animation API
原文:微信小程序把玩(四十)animation API 动画水还是比较深的,这里只是简单介绍下小程序中动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入. w ...
- 微信小程序从零开始开发步骤(七)引入外部js 文件
上一章讲到小程序页面的四种常见的跳转的方法,这一章写如何引入一个外部的js文件,既utils文件夹的用处,其实步骤很简单: 1:准备好外部想要引入的外部文件,命名为util.js,并且填充固定的文件内 ...
- VUE小案例--跑马灯效果
自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...
- 微信小程序的动画效果
前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是 ...
- 微信小程序image组件binderror使用例子(对应html、js中的onerror)
官方文档 binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...
- 微信小程序之楼层效果
今天做了一个小程序实现一个楼层效果 带大家分享下经验和api的使用吧 如图 将左边和右边各分了一个组件 目录如下 其中list页面是这个楼层效果的页面 components是组成这个页面的两个组件 ...
- Vue 小实例 跑马灯效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 微信小程序单个倒计时效果
var end_time = grouponList.expire_time.replace(/-/g, '/') grouponcountdown(that, end_time) //适用于商品列表 ...
- 微信小程序 div选中效果
._left{ position: relative; margin-top: 40rpx; width: 40%; height: 350rpx; border-radius: 12rpx; tex ...
随机推荐
- 运维笔记--ubuntu服务器安装telnet服务
ubuntu 16.04 安装Telnet: Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主要方式.可以通过Telnet实现远程登录服务器,同时也可以用“t ...
- C语言 运算符优先级
规律小结: 结合方向只有三个是从右往左,其余都是从左往右. 所有双目运算符中只有赋值运算符的结合方向是从右往左. 另外两个从右往左结合的运算符也很好记,因为它们很特殊:一个是单目运算符,一个是三目运算 ...
- 调用k8s api遇到CERTIFICATE_VERIFY_FAILED的问题解决方法
前言 python3.5.6版本,django1.1.12版本 最近要调用k8s接口,k8s接口的使用方法请参考官网的说明:戳我 调用k8s接口时,遇到 CERTIFICATE_VERIFY_FAIL ...
- LeetCode_441. Arranging Coins
441. Arranging Coins Easy You have a total of n coins that you want to form in a staircase shape, wh ...
- 【视频开发】【计算机视觉】doppia编译之三:编译安装opencv库
这里我介绍2种方法 (1)利用别人写好的脚本编译,相对来说省力一点 上Github下载别人写好的脚本文件,网址 https://github.com/jayrambhia/Install-OpenC ...
- keystone 域中项目、用户、角色的创建
keystone命令现在全是改成了openstack!!!!!!!!!!!!! Create the service project: $ openstack project create --dom ...
- maven环境搭建教程
1.下载和解压 访问 maven.apache.org .点击download 下载对应系统的文件,window下载bin的zip文件. maven需要java1.7jdk支持,如果jdk没有 ...
- CF-Technocup3 D Optimal Subsequences
D Optimal Subsequences http://codeforces.com/contest/1227/problem/D2 显然,每次求的k一定是这个序列从大到小排序后前k大的元素. 考 ...
- [CMD] Jenkins上执行robot命令如果出现fail不往下走其他的CMD命令了
需要在后面加上||exit 0 robot -o %disSection%.xml --include %disSection% -v ENV:%envBmk% .||exit 0
- Tomcat是一个Servlet容器?
"Tomcat是一个Servlet容器",这句话对于2019年的程序员应该是耳熟能详的. 单纯的思考一下这句话,我们可以抽象出来这么一段代码: class Tomcat { Lis ...