Question

我正在尝试在单击菜单按钮时实现内容滑动（和缓动）的效果。这将是一个普通网站，其中包含不同的内容（图库，投资组合，视频等）和某些页面上的子菜单。

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

有没有人之前做过这个或有相同的想法，不介意分享？非常感谢！

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

Answer 1

我目前正在为api开发一个类似的功能。我加载一个带有链接行的菜单div，将ajax内容拉入“view”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() {

        });
    });
}

目前所有这些都非常松散地组合在一起，但我希望这能让您了解从哪里开始并且可以做到这一点。感谢。

Answer 2

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

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

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

jquery加载和动画iframe与内容

2 个答案: