html中实现图⽚的⽆限滚动,【⼩程序】纯css3实现横向⽆限滚
动
本⽂⽰例都是⽤⼩程序写的,但是不影响要实现的功能。
wxml
装图⽚的盒⼦多复制⼀份,让循环图⽚的⾸尾相接
wxss
.dis-flex {
display: flex;
display: -webkit-flex;
}
.scrollbox {
margin: 30px;
text-align: center;
border: 1px solid blue;
height: 220rpx;js控制css3动画触发
align-items: center;
overflow: hidden;
}
.imgItem {
animation: 24s rowup linear infinite normal;
}
.imgItem image {
width: 200rpx;
height: 200rpx;
margin: 0 20rpx;
}
@keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@-webkit-keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-1000px, 0, 0);
transform: translate3d(-1000px, 0, 0);
}
}
js
调整速度的关键就在,动画的时间是由循环的项⽬个数动态控制的
Page({
data: {
images: new Array(4),
computedAni: ''
},
onLoad: function () {
this.setAniSpeed(this.data.images.length)
},
setAniSpeed (num) {
let time = il(num / 5 * 15) // 这⾥是以5张图⽚的时候,动画时间15s为基准,可以⾃⼰调节this.setData({
computedAni: `${time}s rowup linear infinite normal`
})
}
})
点击这⾥可以查看代码⽚段
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论