0

Wordpress のインストールで、div に多数の li 要素を縦方向にスクロールさせようとしています。経験のある人が私を助けることができるかどうかを確認します.

私は多くの優れた解決策を見つけましたが、それらのすべてが jQuery や JavaScript などの別のインスタンスと競合しているようです。

理想的には、ホバー時にスクロールできるものが欲しいのですが、ボタン、または醜いスクロールバーの単純な非表示でさえ解決します.

私が取り組んでいるページはこちらです: http://ryanlinstrom.com/sandbox/vimeo-test/

ページで次のスクリプトを使用しています。別のスクリプトを追加せずに #thumbs div をスクロールできるように統合する方法があれば、それは素晴らしいことです。

        var apiEndpoint = 'http://vimeo.com/api/v2/';
    var oEmbedEndpoint = 'http://vimeo.com/api/oembed.json'
    var oEmbedCallback = 'switchVideo';
    var videosCallback = 'setupGallery';
    var vimeoUsername = 'user677763';

    // Get the user's videos
    $(document).ready(function() {
        $.getScript(apiEndpoint + vimeoUsername + '/videos.json?callback=' + videosCallback);
    });

    function getVideo(url) {
        $.getScript(oEmbedEndpoint + '?url=' + url + '&width=780&height=435&callback=' + oEmbedCallback);
    }

    function setupGallery(videos) {

        // Sets the video title
        $('#stats h2').text(videos[0].title);

        // Load the first video
        getVideo(videos[0].url);


        // Add the videos to the gallery
        for (var i = 0; i < videos.length; i++) {
            var html = '<li><a href="' + videos[i].url + '" name="'+ videos[i].title +'"><img src="' + videos[i].thumbnail_medium + '" class="thumb" />';
            html += '</a><p>' + videos[i].title + '</p></li>';
            $('#thumbs ul').append(html);
        }


        // Switch to the video when a thumbnail is clicked
        $('#thumbs a').click(function(event) {
            event.preventDefault();
            getVideo(this.href);
            $('#stats h2').detach();
            var title = $(this).attr("name");
            $('#stats').append('<h2></h2>');
            $("#stats h2").text(title);

            return false;
        });

    }

    function switchVideo(video) {
        $('#embed').html(unescape(video.html));
    }
4

1 に答える 1

0

2 つのオーバーレイ非表示 div (上部に 1 つ、下部に 1 つ) を使用することをお勧めします。

次に、次のようなことを行います。

$(".top-scroll").bind("mouseover", function(){
    $(".wrapping-div").animate({scrollTop: -= 5}, 100)
});

$(".bottom-scroll").bind("mouseover", function(){
    $(".wrapping-div").animate({scrollTop: += 5}, 100);
});

そしてもちろん、overflow:hiddencss に追加してスクロールバーを削除します。

于 2012-06-03T03:07:32.417 に答える