search

Home  >  Q&A  >  body text

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

PHP中文网PHP中文网2773 days ago412

reply all(1)I'll reply

  • 怪我咯

    怪我咯2017-04-11 12:13:37

    完全没有必要使用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个盒子,并根据被点击的盒子,进行一次滚动,滚动完成之后又马上恢复原来的位置

    reply
    0
  • Cancelreply