笔记本电脑盖子打开效果

Laptop lid-open effect

本文关键字：电脑 盖子 笔记本      更新时间：2023-09-26

我喜欢 MacBook打开WhitePage (http://whitepagehq.com)主页的方式。我想创建一个类似的效果。

是使用CSS动画，JQuery，还是两者都创建的?我似乎无法从探长那里弄明白。你在别的地方看过类似的动画吗?

如何为我的网站做这样的东西?

有两张图片:

<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);

他们正在使用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);

这段代码是通过jQuery.animate()方法完成的，你可以在他们的内联js脚本中找到它。(查看源代码->第126行)。基本上，它们改变"打开"图像和"关闭"图像的高度。打开的图像展开，盖子闭合的部分向上移动。

相关文章：