1

是否可以使用 jquery 而不是 flash 在页面上制作拉链效果？

例如以下但没有闪光灯（并且垂直坐着）： http ://activeden.net/item/interactive-zipper/92456

我能做的最好的就是让我的拉链下降，然后两侧打开水平滑动哈哈，但我不太擅长 jQuery 业务哈哈

任何帮助或建议将不胜感激，

我的尝试，

$("#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%;
}
4

1 回答 1

0

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

你需要3张图片。

  1. 拉链把手和嘴
  2. 上滑索的图像
  3. 下高空滑索的图像

基本上，您将在 2 个 zip 图像顶部有一个黑色 div，手柄/嘴位于中间。当拉链向左移动时，您需要更改黑色 div 的宽度，并更改与该移动相关的左侧两个拉链图像的位置。将您的溢出设置为图像的容器，然后blamo....您有一个jquery zipper，当您压缩时，它下面的内容会被发现。

于 2013-03-15T19:33:48.993 回答