javascript - 关于ucloud官网无限滑动的滑块的实现思路,求指点
本文介绍了javascript - 关于ucloud官网无限滑动的滑块的实现思路,求指点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
控制台中看大致看到是控制整体列表的
margin-left
然后移动元素达到无限滑动我按照这么做了,但可能方法不对,先margin-left再用jq的
insertBefore
位移元素不过有明显的不连贯现象想请问下各位这种滑动正确的思路是怎么样的
解决方案
完全没有必要使用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个盒子,并根据被点击的盒子,进行一次滚动,滚动完成之后又马上恢复原来的位置
这篇关于javascript - 关于ucloud官网无限滑动的滑块的实现思路,求指点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文