Question

我喜欢 MacBook在WhitePage（http://whitepagehq.com）主页上打开的方式。我想创造一个类似的效果。

这是使用CSS Animation，JQuery还是两者创建的？我似乎无法从检查员那里得知。你有没有在其他地方看过类似的动画？

如何为我的网站制作类似的内容？

Answer 1

有两张图片：

<img src="lib/img/laptop-closed.png" class="lid-closed"/>
<img src="lib/img/laptop-open.png?1" class="lid-open"/>

动画只需更改文档就绪的laptop-open.png图像高度。

这是使用jQuery完成的（在第126行的主页内）：

setTimeout(function () {
    $('.lid-closed').animate({
        top:10,
        height:9,
        width:840
    }, {
        easing:'linear',
        duration:500
    });

    $('.lid-open').animate({
        height:207
    }, {
        easing:'easeOutQuad',
        duration:1000
    });
}, 1000);

Answer 2

他们正在使用jquery为打开的笔记本电脑图像的高度设置动画：

setTimeout(function(){
    $('.lid-closed').animate({
        top: 10,
        height: 9,
        width: 840
    },
    {
        easing: 'linear',
        duration: 500
    });$('.lid-open').animate({
        height: 207
    },
    {
        easing: 'easeOutQuad',
        duration: 1000
    });
},
1000);

Answer 3

此代码由jQuery.animate（）方法完成，您可以在其内联js脚本中找到它。（查看来源 - ＆gt;第126行）。基本上，它们在“关闭”图像的同时改变“打开”图像的高度。打开的图像会展开，盖子的封闭部分会向上移动。

笔记本电脑盖打开效果

3 个答案: