焦点图学习

原创
2015/11/23 13:52
阅读数 27

焦点图实现方法有很多,我才刚刚开始接触,我用的方法有两种,一个是无序列表,一种是普通div实现基本效果。

这两种方法的基本原理都是overflow来做,每次现实的地方只有一部分。然后控制显示部分的位置样式来改变焦点。

第一种:点击下一页或者上一页。这种方法的原理就是,当我们执行某一事件时,改变无序列表的顺序,如果是点击下一页,就把无序列表的第一个元素放到最后一个,相关方法:firstchild(),append();.animate();

第二种方法:点击li。这种方法只需要两个div;一个用来显示的div(外围,宽高比内部div小),另一个用来存放内容的div(宽高比外围的大)。具体方法,判断点击的li的index值,然后通过改变内部div的样式(margin-left),来实现动画效果,然后,给点击的li添加一个类并且清楚其他的li的同名类,用这个类来突出被点击的li和其他li的不同之处。


展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部