Javascript 如何在indexPage上加载tumblr nextPage的内容

我正在为我的个人作品集开发一个tumblr主题，但我在工作区遇到了一个严重的问题，我想创建一个水平滑块效果，当我单击“下一步”查看较旧的帖子时

像这样：

<?php
header('Content-Type: application/json');
$send = array();
switch($_POST['section']) {
default:
    $send['html'] = '<div class="section" id="section'.$_POST['section'] .'"><h2>Section ' . $_POST['section'] . '</h2>
        <p>
            This is a new section loaded via AJAX, cool huh?
        </p>
        <ul class="nav">
            <li><a href="#section1">1</a></li>
            <li><a href="#section2">2</a></li>
            <li><a href="#section3">3</a></li>
            <li class="getNew">New</li>
        </ul>
    </div>';
    $send['id'] = 'section'.$_POST['section'];
    $send['name'] = $_POST['section'];
}
echo json_encode($send);

我有这个来定义我的下一页，#第4部分是我的工作岗位：

<!-- Next Page -->
{block:NextPage}
<div>
    <a id="next-button" href="{NextPage}#section4" class="next panel" style="position:relative; top:630px; left:1550px;">next</a>
</div>
{/block:NextPage}
<!-- / Next Page -->

单击“下一步”时，将转到：

"indexPage".tumblr.com/page/2#section4

---

有没有办法在我的索引页上实现这种幻灯片效果，或者至少让人产生错觉，当我移动到另一页时，我正在制作幻灯片效果？

当然，所有事情都必须发生在一页上，或者你不能准确地进行转换。所以，要么在运行时加载所有内容，要么使用AJAX“作弊”

将javascript中的页面更改为以下内容：

function bindAnimation(event) {
            var $anchor = $(this);
            /*
            if you want to use one of the easing effects:
            $('html, body').stop().animate({
                scrollLeft: $($anchor.attr('href')).offset().left
            }, 1500,'easeInOutExpo');
             */
            $('html, body').stop().animate({
                scrollLeft: $($anchor.attr('href')).offset().left
            }, 1000);
            event.preventDefault();
        }

        $(function() {
            $('ul.nav').on('click','.getNew',getNewSection);    
            $('ul.nav').on('click','a',bindAnimation);
        });

这允许您将元素动态添加到navs，并将事件侦听器附加到我们将用于获取新内容的新元素。 修改导航菜单，使最后一个元素类似于：

<li class="getNew">New</li>

新建

在那里。现在单击该按钮将加载新内容。 将此javascript代码添加到您的站点上，添加到前面的javascript代码之上：

window.newSectionBlack = false;
        window.SectionID = 4;
        function displaySection(data,textStatus, jqXHR) {
            $('#section3').after(data.html); //add the new section
            $('#'+data.id).addClass(newSectionBlack ? 'black' : 'white');
            newSectionBlack = !newSectionBlack; //style it consistently
            $('.getNew').before('<li><a href="#'+data.id+'">'+data.name+'</li>'); //attach a link to the new section to the menu
            $('body').css({width:4000*SectionID});
            $('#'+data.id+' ul.nav').on('click','a',bindAnimation); //bind scripts
            $('#'+data.id+' ul.nav').on('click','.getNew',getNewSection);
            $('#section1 > ul li:nth-last-child(2) > a').trigger('click'); //go to new
            SectionID++;
        }

function getNewSection() {
    $.ajax({
        type: "POST",
        url: 'LoadSection.php',
        data: {section:SectionID},
        success: displaySection,
        dataType: 'json'
   });
}

window.newSectionBlack=false；
window.SectionID=4；
功能显示部分（数据、文本状态、jqXHR）{
$（'#section3'）。在（data.html）之后；//添加新的节
$（'#'+data.id）.addClass（newSectionBlack？'black'：'white'）；
newSectionBlack=！newSectionBlack；//保持样式一致
$（'.getNew'）。在（'



新

';
$send['id']='section'。$\u POST['section']；
$send['name']=$_POST['section']；
}
echo json_编码（$send）；

现在，您的页面可以动态加载内容！ 请注意，导航栏可能应该被重新构造为一个绝对元素，每个页面上只有一个而不是重复的元素，还有其他可以清理的东西，但如果您以codrops为例，这是意料之中的

编辑：

tumblr不允许您在其服务器上运行服务器端脚本（有道理），这是上述AJAX方法工作所必需的。 1） 将tumblr页面重定向到您控制的站点，并使用上述方法。 2） 使用iframe

iframe方法可以直接完成，这要求您提前指定所有页面的URL（或者至少它们需要遵循可预测的模式），或者间接使用类似于上面所述的AJAX脚本。我将演示如何加载一个直接iframe，我相信您可以解决其余问题

window.newSectionBlack = false;
window.newSectionID = 4;

function getNewSection() {
    $('#section3').after('<div class="section" id="section'+newSectionID+'"><h2>New Section</h2>
        <iframe src="yourtumbrsite.com></iframe>
        <ul class="nav">
            <li><a href="#section1">1</a></li>
            <li><a href="#section2">2</a></li>
            <li><a href="#section3">3</a></li>
            <li class="getNew">New</li>
        </ul>
    </div>
'); //add the new section
            $('#section'+newSectionID).addClass(newSectionBlack ? 'black' : 'white');
            newSectionBlack = !newSectionBlack; //style it consistently
            $('.getNew').before('<li><a href="#section'+newSectionID+'">'+newSectionID+</li>'); //attach a link to the new section to the menu
            $('body').css({width:4000*newSectionID});
            $('#'+data.id+' ul.nav').on('click','a',bindAnimation); //bind scripts
            $('#'+data.id+' ul.nav').on('click','.getNew',getNewSection);
            $('#section1 > ul li:nth-last-child(2) > a').trigger('click'); //go to new
            newSectionID++;
}

window.newSectionBlack=false；
window.newSectionID=4；
函数getNewSection（）{
$（“#第3节”）。之后（'新节
如果我正确理解您的问题，正如serakfalcon所提到的，但我将添加tumblr的具体要点。您需要具体做三件事。我不会讨论太多tumblr模板代码和样式，并坚持这些

动态加载数据
动态创建新的节/页
让导航与新部分一起工作
加载数据
这其实很简单。对于tumblr，正如您所提到的，我们可以通过单击“下一页”链接手动转到下一页。在tumblr中，这类似于

{block:NextPage}
  <li></li><a href="{NextPage}" class="next-page static">{lang:Next page}</a></li>   
{/block:NextPage}

$(document.body)
.on('click','ul.nav a:not(.next-page):not(.last-page)',function(e){
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollLeft: $($anchor.attr('href')).offset().left
    }, 1000);
    e.preventDefault();
})
.on('click',".next-page:not(.static)",function(e){ //next page not static
    e.preventDefault()
    $('html, body').stop().animate({
        scrollLeft: $(this).closest(".section").nextAll(".section").offset().left
    }, 1000);
})
.on('click',".last-page",function(e){ //last page
    e.preventDefault()
    $('html, body').stop().animate({
        scrollLeft: $(this).closest(".section").prevAll(".section").offset().left
    }, 1000);
})
.on('click',".static",function(e){
    e.preventDefault();
    var that=this
    var xhr=$.get($(this).attr("href"),function(a){
        $(that).removeClass('static')
        var $loaded=$(a)
        var next_section=$($("#section-template").html());
        var num_sections=$(".section").length + 1
        next_section.addClass(num_sections%2 ? "white" : "black")
        next_section.find(".posts").html($loaded.find("#posts").html())
        var next_link=$loaded.find(".static")
        if(next_link.length){
            next_section.find(".static").attr("href",next_link.attr("href"))
        } else {
            next_section.find(".static").hide()
        }
        $("#horizontal-scroller").append(next_section); //append to body
        $("#horizontal-scroller").width(4000*num_sections); //resize body

        $('html, body').stop().animate({
            scrollLeft: $(next_section).offset().left
        }, 1000);
    }) //$.get
}) //click

创建新的节/页
一旦我们有了数据，我们现在需要把数据放到一个新的页面上。有很多方法可以做到这一点，但我就是这样做的。首先，我有一个新部分的模板。我把它放在这样一个脚本标记中。我有点喜欢这样做的语义

<script type="text/x-template" id="section-template">
    <div class="section">
        <div class="posts"></div>
        <ul class="nav">
            <li><a href="#section1">1</a></li>
            <li><a href="#section2">2</a></li>
            <li><a href="#section2">3</a></li>
            <li><a href="#section4">4</a></li>
            <li><a href="#" class="last-page">Back</a></li>
            <li><a href="#" class="next-page static">Next</a></li>
        </ul>
    </div>
</script>

让导航正常工作
我可能应该在nav中添加新链接，但我想为了让它更简单（想象一下40页的情况），我决定只使用“下一页”和“最后一页”来加载内容。代码很简单。对于下一页，如果不是
.static
，请转到下一节，与上一页相同。我们将（从技术上讲，我使用的是
.on（）
，但
.delegate
上的文档似乎更容易理解）将其添加到文档正文中，以便它适用于所有新链接

因此，作为一个整体，javascript/jquery看起来像

{block:NextPage}
  <li></li><a href="{NextPage}" class="next-page static">{lang:Next page}</a></li>   
{/block:NextPage}

$(document.body)
.on('click','ul.nav a:not(.next-page):not(.last-page)',function(e){
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollLeft: $($anchor.attr('href')).offset().left
    }, 1000);
    e.preventDefault();
})
.on('click',".next-page:not(.static)",function(e){ //next page not static
    e.preventDefault()
    $('html, body').stop().animate({
        scrollLeft: $(this).closest(".section").nextAll(".section").offset().left
    }, 1000);
})
.on('click',".last-page",function(e){ //last page
    e.preventDefault()
    $('html, body').stop().animate({
        scrollLeft: $(this).closest(".section").prevAll(".section").offset().left
    }, 1000);
})
.on('click',".static",function(e){
    e.preventDefault();
    var that=this
    var xhr=$.get($(this).attr("href"),function(a){
        $(that).removeClass('static')
        var $loaded=$(a)
        var next_section=$($("#section-template").html());
        var num_sections=$(".section").length + 1
        next_section.addClass(num_sections%2 ? "white" : "black")
        next_section.find(".posts").html($loaded.find("#posts").html())
        var next_link=$loaded.find(".static")
        if(next_link.length){
            next_section.find(".static").attr("href",next_link.attr("href"))
        } else {
            next_section.find(".static").hide()
        }
        $("#horizontal-scroller").append(next_section); //append to body
        $("#horizontal-scroller").width(4000*num_sections); //resize body

        $('html, body').stop().animate({
            scrollLeft: $(next_section).offset().left
        }, 1000);
    }) //$.get
}) //click

这里有一个的工作原理。我并不想让幻灯片看起来好看，但希望你觉得这很有帮助。
你不觉得你低估了自己吗？不，我真的需要一个答案…：（我相信你需要有一个单页网站来实现这种效果。你也可以看看如何实现不同的页面转换效果来澄清，你的工作页面是一个tumblr页面？（即
site.tumblr.com/work
）或者你的tumblr的帖子是你的作品（即：
site.tumblr.com/page/2
包含您以前的作品，但您的主题有一个头版和#第4节是您的帖子发布的地方）或者它是您主题的一部分（即：
#主主题的第4节
）？您好！我的工作在site.tumblr.com/#section4上，我已经有了一个垂直滑块来在节之间切换，但是现在我需要一个水平滑块来在section4内切换，并加载页面/2以便我可以执行滑块hello，我实现了这个，但不幸的是它不起作用，我将继续尝试，因为可能我没有正确调整您的代码。谢谢对于anwer，如果一切正常，我会接受它。你有gmail帐户以便我们聊天吗？我测试了代码并确保它正常工作。代码假设你可以发送任何内容。如果你从其他页面加载（你无法控制），您可能希望使用iframe，您可以直接实现（通过替换AJAX调用，插入iframe链接）或通过我编写的AJAX方法间接使用php页面。我更喜欢在stackoverflow上进行通信，如果可以的话，我将继续尝试在tumblr中实现，我已经有了
$(document.body)
.on('click','ul.nav a:not(.next-page):not(.last-page)',function(e){
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollLeft: $($anchor.attr('href')).offset().left
    }, 1000);
    e.preventDefault();
})
.on('click',".next-page:not(.static)",function(e){ //next page not static
    e.preventDefault()
    $('html, body').stop().animate({
        scrollLeft: $(this).closest(".section").nextAll(".section").offset().left
    }, 1000);
})
.on('click',".last-page",function(e){ //last page
    e.preventDefault()
    $('html, body').stop().animate({
        scrollLeft: $(this).closest(".section").prevAll(".section").offset().left
    }, 1000);
})
.on('click',".static",function(e){
    e.preventDefault();
    var that=this
    var xhr=$.get($(this).attr("href"),function(a){
        $(that).removeClass('static')
        var $loaded=$(a)
        var next_section=$($("#section-template").html());
        var num_sections=$(".section").length + 1
        next_section.addClass(num_sections%2 ? "white" : "black")
        next_section.find(".posts").html($loaded.find("#posts").html())
        var next_link=$loaded.find(".static")
        if(next_link.length){
            next_section.find(".static").attr("href",next_link.attr("href"))
        } else {
            next_section.find(".static").hide()
        }
        $("#horizontal-scroller").append(next_section); //append to body
        $("#horizontal-scroller").width(4000*num_sections); //resize body

        $('html, body').stop().animate({
            scrollLeft: $(next_section).offset().left
        }, 1000);
    }) //$.get
}) //click