1

我试图在单击菜单按钮时实现内容滑动（和缓动）的效果。这将适用于具有不同内容（画廊、作品集、视频等）的普通网站，并且某些页面上的子菜单会滑入。

我已经了解了通过预加载和隐藏的 div 滑动的所有滑动插件（如 coda 滑块）。但我担心如果我在第一页上加载整个网站，那听起来是错误的。另一方面，使用 iframe 执行此操作并使用 load() 加载数据我不确定我是否可以滑动并缓和数据（如 coda 滑块示例 8）。

有没有人这样做过或有同样的想法，不介意分享？将不胜感激！

http://www.ndoherty.biz/demos/coda-slider/2.0/#2

4

2 回答 2

0

我目前正在为我们的 api 开发类似的功能。我并加载一个带有链接行的菜单 div，这些链接将 ajax 内容拉入“视图”div，然后我将菜单设置为动画，然后将视图设置为主 iFrame。这很容易做到，所以请查看我的一些 javascript 和 html 波纹管。当我提出这个问题时，我会回来更新答案，您可以围绕成品进行挖掘。希望这可以帮助。

<!-- list all the available matches first -->
    <div id="MatchContainer">
        <div id="spinner"></div>
        <div id="matchesListHolder">
            <% if @matches %>
                <% @matches.each do |match| %>
                    <%= render :partial => 'plugins/live/clubs/matches_list_item', :locals => {:match => match} %>
                <% end %>
            <% else %>
                There are currently no matches to display
            <% end %>
        </div>
        <div id="matchHolder">

        </div>
        <div id="closeMatchView">x</div>
    </div>

matchHolder 用于显示加载和内容，并被赋予 -600px 位置，因此它隐藏在 iFrame 顶部之外。然后我打电话来获取比赛的记分卡

$(function() {

    // click event fired to change to the match view window
    $('.matchLink').click(function(event) {
        if (!clicked) {
            clicked = true; // stop click reptition
            event.preventDefault();
            var live = ($(this).attr('live') == 'true') ? true : false;
            var matchId = Number($(this).attr('id'));
            $('#matchesListHolder').animate({top: -600}, 500, function() {
                $(this).hide();
                $('#spinner').show();
                if (live) { 
                    displayLiveMatch(matchId);
                } else {
                    displayMatch(matchId);
                }
            });
        }
    });

    // click function on the close button when the match view window is open
    $('#closeMatchView').click(function() {
        closeMatchView();
    });

});

// display a scorecard for a finished match
function displayMatch(id) {
    $.get('/plugins/matches/scorecard/' + id, function(response) {
        $('#matchHolder').empty().html(response);
        moveDownMatchHolder();
    });
}

// move down the match holder container into the iframe
function moveDownMatchHolder() {
    $('#spinner').hide();
    $('#matchHolder').show().animate({top: 0}, 500, function() {
        $('#closeMatchView').show();
    });
}

// close the match view and re open the matches list
function closeMatchView() {
    $('#closeMatchView').hide();
    clicked = false;
    $('#matchHolder').animate({top: -600}, 500, function() {
        $(this).hide();
        $('#matchesListHolder').show().animate({top: 0}, 500, function() {

        });
    });
}

目前所有内容都非常松散，但我希望这能让您知道从哪里开始，并且有可能做到这一点。谢谢。

于 2011-12-05T07:46:16.890 回答
0

我编写了 Coda Slider，最近还编写了Liquid Slider，它是 Coda Slider 的响应版本。

我还写了一个简短的教程，介绍如何使用 Ajax 在单击面板后加载 Twitter 提要。我希望这有帮助...

http://liquidslider.kevinbatdorf.com/tutorials/dynamically-add-content-to-a-panel-when-clicked-using-ajax/

于 2013-01-05T02:24:24.333 回答