0

我试图让一个 div 垂直滚动我的 Wordpress 安装中的一些 li 元素 - 在 jQuery / javascript 方面，我是一个严肃的业余爱好者，但是在整天阅读这里的论坛之后，我想我会检查一下，看看有没有经验的人可以帮助我。

我找到了很多很棒的解决方案，但它们中的每一个似乎都与另一个 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

我建议使用两个重叠的不可见 div（一个在顶部，一个在底部）。

然后做类似的事情：

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

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

然后，当然，添加overflow:hidden到您的 CSS 以删除滚动条。

于 2012-06-03T03:07:32.417 回答