首页 > 关于ucloud官网无限滑动的滑块的实现思路,求指点

关于ucloud官网无限滑动的滑块的实现思路,求指点


完全没有必要使用Jq ,jQ已经逐渐被淘汰的趋势了

这种轮播的效果实现并不复杂

我说说我的思路

1.划定3种class 一种active 就是被放大的 另一种则是普通的 g-box 还有一种就是两边半透明的class hidden
2.给每个盒子加 transition 动画
3.父级使用overflow hidden 内部镶嵌一个ul(也叫transition) ul 宽度很大将所有的li包裹
4.点击一个 盒子 将其 class 添加 上active ul计算 margin-left 的距离(负值) 让其滚动到对应的位置,计算被点击的盒子左右两边缘的盒子半透明,加上hidden
5.如何获取那个盒子被点击呢? 可以给盒子加上 data-index:x 通过dataset 获取盒子的索引

补充

刚刚看了一下 uCould

思路是不一样的

他实际上并不是滚动,而是重渲

滚动的效果是模拟的,欺骗用户的眼睛

每点击一次,重新渲染所有5个盒子,并根据被点击的盒子,进行一次滚动,滚动完成之后又马上恢复原来的位置

【热门文章】
【热门文章】