0

我正在尝试使用jQuery Tools Scrollable,我之前已经使用过很多次,但现在它似乎不起作用,我不知道为什么。

这是我正在使用的网站,如果需要,我可以在这里粘贴代码,但我相信你可以在控制台中查看源代码,所有内容都是纯 HTML、CSS 和 JavaScript / jQuery:http: //rolandgroza.com/projects/tcsg/

这是HTML结构:

<section class="galleries-wrapper">
    <div class="paper-stack-wrapper">
        <div class="header-wrapper">
            <h2>Featured Galleries</h2>
        </div>
        <div class="content-wrapper scrollable vertical">
            <div class="items">
                <div class="item">
                    <ul class="css-galleries-list">
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/awwwards.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">awwwards</a></span>
                            <span class="css-gallerie-rank">6</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/cssdesignawards.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">cssdesignawards</a></span>
                            <span class="css-gallerie-rank">6</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/csswinner.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">csswinner</a></span>
                            <span class="css-gallerie-rank">4</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/divinecss.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">divinecss</a></span>
                            <span class="css-gallerie-rank">5</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/pagecrush.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">pagecrush</a></span>
                            <span class="css-gallerie-rank">3</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                    </ul>
                </div>
                <div class="item">
                    <ul class="css-galleries-list">
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/awwwards.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">awwwards</a></span>
                            <span class="css-gallerie-rank">6</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/cssdesignawards.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">cssdesignawards</a></span>
                            <span class="css-gallerie-rank">6</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/csswinner.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">csswinner</a></span>
                            <span class="css-gallerie-rank">4</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/divinecss.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">divinecss</a></span>
                            <span class="css-gallerie-rank">5</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                        <li>
                            <span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/pagecrush.jpg"></a></span>
                            <span class="css-gallerie-name"><a href="#">pagecrush</a></span>
                            <span class="css-gallerie-rank">3</span>
                            <span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-wrapper">
            <h2>Other Galleries</h2>
        </div>
    </div>
    <div class="paper-stack-shadow"></div>
    <div class="galleries-navigation">
        <ul class="nvg">
            <li class="previous-items"><a class="prev-item"><img src="assets/gfx/prev-item.png" alt="Previous" /></a></li>
            <li class="next-items"><a class="next-item"><img src="assets/gfx/next-item.png" alt="Next" /></a></li>
        </ul>
    </div>
</section>

这是 LESS 样式(不是那么相关,但插件需要一些 CSS 规则):

.galleries-wrapper {
    position: relative;
    float: right;
    margin-top: 50px;
    .dimensions(450px, 350px);
    .opacity(0);

    .paper-stack-wrapper {
        position: relative;
        margin: 0px auto;
        .dimensions(450px, 350px);
        .border(1px, 1px, 1px, 1px, #bbc2c8);
        .radius(5px, 5px, 5px, 5px);
        .background(@noise-dark, #f9f9f9, #f9f9f9);

        &:before {
            position: absolute;
            top: 1px;
            left: 0px;
            content: "";
            z-index: -1;
            .dimensions(448px, 350px);
            .border(1px, 1px, 1px, 1px, #bbc2c8);
            .radius(5px, 5px, 5px, 5px);
            .background(@noise-dark, #f9f9f9, #f9f9f9);
        }

        &:after {
            position: absolute;
            top: 3px;
            left: 1px;
            content: "";
            z-index: -2;
            .dimensions(446px, 350px);
            .border(1px, 1px, 1px, 1px, #bbc2c8);
            .radius(5px, 5px, 5px, 5px);
            .background(@noise-dark, #f9f9f9, #f9f9f9);
        }

        .header-wrapper {
            position: relative;
            margin: 0px auto;
            .dimensions(450px, 40px);
            .radius(5px, 5px, 0px, 0px);
            .shadow(@shadow-inset, 0px, -1px, 2px, rgba(000, 000, 000, 0.2));

            h2 {
                .font(ChunkFiveRoman, 21px, normal, normal, normal);
                .text-format(center, none, none, inherit, uppercase, normal, 40px, normal, #afafaf);
            }
        }

        .scrollable {
            position: relative;
            margin: 0px auto;
            .dimensions(450px, 269px);
            overflow: hidden;

            .items {
                position: absolute;
                height: 20000em;

                .item {
                    position: relative;
                    margin: 0px auto;
                    .dimensions(450px, 269px);

                    .css-galleries-list {
                        position: relative;
                        margin: 0px auto;
                        .dimensions(450px, 269px);
                        list-style: none;

                        li {
                            position: relative;
                            margin: 0px auto;
                            .dimensions(450px, 53px);
                            .border(1px, 0px, 0px, 0px, #bbc2c8);
                            .background(@noise-dark, #ffffff, #f6f6f6);

                            &:first-child {
                                .border(0px, 0px, 0px, 0px, #bbc2c8);
                            }

                            &:hover {
                                .background(@noise-dark, #f6f6f6, #f1f1f1);
                            }

                            .css-gallerie-logo {
                                position: relative;
                                float: left;
                                .dimensions(180px, 53px);

                                a {
                                    position: relative;
                                    margin: 0px auto;
                                    display: block;
                                    .dimensions(150px, 53px);

                                    img {
                                        position: relative;
                                        margin: 0px auto;
                                        margin-top: 11.5px;
                                        .border(1px, 1px, 1px, 1px, #000000);
                                    }
                                }
                            }

                            .css-gallerie-name {
                                position: relative;
                                float: left;
                                .dimensions(150px, 53px);

                                a {
                                    display: block;
                                    .font(ChunkFiveRoman, 14px, normal, normal, normal);
                                    .text-format(left, none, none, inherit, uppercase, normal, 53px, normal, #afafaf);
                                    .transition (all, 0.25s, ease-in-out);

                                    &:hover {
                                        .font(ChunkFiveRoman, 14px, normal, normal, normal);
                                        .text-format(left, none, none, inherit, uppercase, normal, 53px, normal, #1fbacb);
                                        .transition (all, 0.25s, ease-in-out);
                                    }
                                }
                            }

                            .css-gallerie-rank {
                                position: relative;
                                float: left;
                                display: block;
                                .dimensions(50px, 53px);
                                .font(ChunkFiveRoman, 16px, normal, normal, normal);
                                .text-format(center, none, none, inherit, uppercase, normal, 53px, normal, #82a664);

                            }

                            .css-gallerie-sbmt {
                                position: relative;
                                float: left;
                                .dimensions(50px, 53px);

                                a {
                                    #bundle > .button(55px, 22.5px, 25px,Arial, 11px, normal);
                                    position: relative;
                                    margin: 0px auto;
                                    margin-top: 15.25px;
                                }
                            }
                        }
                    }
                }
            }
        }

        .footer-wrapper {
            position: relative;
            margin: 0px auto;
            .dimensions(450px, 41px);
            .radius(0px, 0px, 5px, 5px);
            .shadow(@shadow-inset, 0px, 1px, 2px, rgba(000, 000, 000, 0.2));

            h2 {
                .font(ChunkFiveRoman, 21px, normal, normal, normal);
                .text-format(center, none, none, inherit, uppercase, normal, 40px, normal, #afafaf);
            }
        }
    }

    .paper-stack-shadow {
        position: absolute;
        top: 290px;
        .dimensions(450px, 50px);
        z-index: -5;

        &:before {
            position: absolute;
            top: 80%;
            left: 10px;
            bottom: 5px;
            width: 50%;
            max-width: 300px;
            content: "";
            z-index: -1;
            .shadow(@shadow-normal, 0px, 15px, 10px, #777777);
            .transform-rotate(-3deg);
        }
        &:after {
            position: absolute;
            top: 80%;
            right: 10px;
            bottom: 5px;
            width: 50%;
            max-width: 300px;
            content: "";
            z-index: -1;
            .shadow(@shadow-normal, 0px, 15px, 10px, #777777);
            .transform-rotate(3deg);
        }
    }

    .galleries-navigation   {
        position: absolute;
        top: 50%;
        right: -42px;
        margin-top: -40px;
        .dimensions(40px,80px);
        .border(1px, 0px, 1px, 1px, #bbc2c8);
        .background(@noise-dark, #f9f9f9, #f9f9f9);
        .radius(0px, 5px, 5px, 0px);
        .shadow(@shadow-normal,0px, 0px, 4px, rgba(0,0,0,0.1));
        z-index: -5;

        .nvg {
            position: relative; 
            margin: 0px auto;
            .dimensions(40px, 80px);
            list-style: none;

            .previous-items { 
                position: relative;
                margin: 0px auto;
                .dimensions(40px, 40px);
                .border(0px, 0px, 0px, 0px, rgba(247,247,247,1));
                display: block;

                a { 
                    position: relative;
                    margin: 0px auto;
                    .dimensions(40px, 40px);
                    display: block;
                    cursor: pointer;
                    .font (Arial, 13px, normal, normal, normal);
                    .text-format(center, none, none, inherit, none, normal, normal, normal, #6e6e6e);
                    .transition (all, 0.3s,ease-in-out);

                    img {
                        position: relative;
                        margin: 0px auto;
                        .dimensions(40px, 40px);
                        .opacity(0.8);
                        .transition (all, 0.3s,ease-in-out);
                        border: none;
                    }

                    &:hover > img {
                        .opacity(1);
                    }           
                }
            }

            .next-items {
                position: relative;
                margin: 0px auto;
                .dimensions(40px, 40px);
                .border(1px, 0px, 0px, 0px, #bbc2c8);
                display: block;

                a { 
                    position: relative;
                    margin: 0px auto;
                    .dimensions(40px, 40px);
                    display: block;
                    cursor: pointer;
                    .font (Arial, 13px, normal, normal, normal);
                    .text-format(center, none, none, inherit, none, normal, normal, normal, #6e6e6e);
                    .transition (all, 0.3s,ease-in-out);

                    img {
                        position: relative;
                        margin: 0px auto;
                        .dimensions(40px, 40px);
                        .opacity(0.6);
                        .transition (all, 0.3s,ease-in-out);
                        border: none;
                    }

                    &:hover > img {
                        .opacity(1);
                    }
                }
            }
        }
    }
}

这就是我调用插件的方式:

var next_items = $(container.home).find('.next-item');

var prev_items = $(container.home).find('.prev-item');

$.easing.custom = function (x, t, b, c, d) {
    var s = 1.70158;
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

$(".scrollable").scrollable({
    vertical: true,
    easing: 'custom',
    speed: 700,
    circular: false,
    next: next_items,   
    prev: prev_items,
    mousewheel: true
});
4

1 回答 1

1

编辑:我删除了上面的所有内容..

此错误正在破坏您的脚本

在此处输入图像描述

于 2012-04-26T17:28:34.463 回答