网页制作 
首页 > 网页制作 > 浏览文章

纯css3实现横向无限滚动的示例代码

(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )

本文示例都是用小程序写的,但是不影响要实现的功能。

wxml

装图片的盒子多复制一份,让循环图片的首尾相接

<view class="scrollbox dis-flex">
    <view class="imgItem dis-flex" style="animation: {{computedAni}};">
      <image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>
    </view>
    <view class="imgItem dis-flex" style="animation: {{computedAni}};">
      <image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>
    </view>
</view>

wxss

.dis-flex {
  display: flex;
  display: -webkit-flex;
}
.scrollbox {
  margin: 30px;
  text-align: center;
  border: 1px solid blue;
  height: 220rpx;
  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 = Math.ceil(num / 5 * 15) // 这里是以5张图片的时候,动画时间15s为基准,可以自己调节
    this.setData({
      computedAni: `${time}s rowup linear infinite normal`
    })
  }
})

点击这里可以查看代码片段

https://developers.weixin.qq.com/s/4gGngEm67Zlh

上一篇:css之Display、Visibility、Opacity、rgba和z-index: -1的区别
下一篇:CSS3实现莲花绽放的动画效果
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap