读书人

仿新版迅雷列表进场卡通片体验

发布时间: 2012-09-16 17:33:16 作者: rapoo

仿新版迅雷列表进场动画体验

迅雷7的用户体验确实不错~对它的list列表进场时的动画印象尤为深刻(具体自己体验)。下面前端技术实现一下这个特效。

第一步是要模拟一种渐缓FadeIn的效果,html代码就是一个ul列表。开始对所有的li都display:none

?

$('li').each(function(index){    $(this).delay(index * 80).animate({        marginTop: '0px',        opacity: 1    }, (index + 1) *150);});

?

直接对每一个li逐个添加animate 改变透明度和外边距,这样就能基本实现和迅雷列表入场动画一样效果了!

另外扯一句有些同学可能会担心性能问题,经测试其实这样的动画在各个浏览器都能流畅运行!

?

读书人网 >Web前端

热点推荐