腾讯《活着》频道JS图片替换效果解析

腾讯《活着》频道JS图片轮换效果解析
腾讯《活着》频道JS图片轮换效果解析1.原理分析

总析:

包含内容的层->宽:900 高:400

主要显示层-> 宽800 高400 即最上面那层 z-index=100

中间层->宽- 800*5/6 高400*5/6 z-index=10

最下面的层->宽 800*2/3 高 400*2/3 z-index=1

通过不同宽/高/z-index 来达到层次感 然后通过定时器是层移动 但样式不同 即左中2移动到最上面 左中2的样式变为最上面的样式 原来最上面的样式变为右2 依次类推

1.层z-index属性的运用 上面->下面层z-index依次是:100-10-1

2.margin-top 的运用 最上面与中间,中间与下面的递减 主要是通过这个属性实现的

3.定时器的运用

6.完成
结语:看见好东西就忍不住想看看 下载Demo