使用 php/jQuery 的拉链效果，如“zipper google doodle”

Question

是否可以使用jquery而不是flash在页面上制作拉链效果？例如以下但没有闪光灯（并且垂直放置）： https://web.archive.org/web/20120621081324/http://activeden.net/item/interactive-zipper/92456

我能做的最好的就是把拉链拉下来，然后两侧打开水平滑动

我的尝试，

$("#openbox").click(function() {
    
    $("#openbox").stop().delay(0).animate({
        "top": "+=600px"
    }, 600);
    $curtainopen = false;
    
    $(".leftcurtain").stop().delay(600).animate({
        "left": "-=380px"
    }, 3000);
    
    $(".rightcurtain").stop().delay(600).animate({
        "right": "-=390px"
    }, 3000);
    
    $curtainopen = true;

    return false;
});

CSS

#openbox {
    width:38px;
    height:100px;
    background-image:url(images/zip.png);
    position:absolute;
    top:100px;
    left:420px;
    z-index:6
}
.leftcurtain {
    width: 50%;
    height: 100%;
    top: 0px;
    left: 0px;
    position:absolute;
    background-position:right;
    z-index: 5;
    background-image:url(images/frontcurtain-left.jpg);
    background-repeat:no-repeat;
}
.rightcurtain {
    width: 52%;
    height: 100%;
    right: 0px;
    top: 0px;
    position: absolute;
    z-index: 5;
    background-image:url(images/frontcurtain-right.png);
    background-repeat:no-repeat;
}
.rightcurtain img, .leftcurtain img {
    width: 100%;
    height: 100%;
}

Answer 1

是的...我通常说在 jQuery 中任何可以在 flash 中完成的事情都是可能的。但您在旧版浏览器上可能会遇到问题。这是尝试此操作的一种可能方法。

您需要 3 张图片。

1. 拉链手柄和拉链嘴
2. 上方滑索的图片
3. 下部滑索的图片

基本上，你会在 2 个 zip 图像的顶部有一个黑色的 div，手柄/嘴位于中间。当拉链向左移动时，您需要更改黑色 div 的宽度，并相对于该移动向左更改两个拉链图像的位置。将溢出设置为图像的容器，然后……你自己就有了一个 jquery 拉链，当你压缩时，下面的内容就会被揭开。