小编vyn*_*ynx的帖子

使用AJAX将Wordpress后期内容加载到DIV中

我几天前发布了一个关于如何在我正在开发的自定义Wordpress模板中滚动到单个帖子的问题.我在坚果壳中需要的是在单击特定链接时将单个帖子加载到定义的DIV中,然后向下滚动到保存新加载内容的DIV.考虑到Wordpress或任何其他CMS的动态内容特性,该链接的URL不能是绝对的.

不幸的是,在那个时间点没有任何具体的答案,所以我决定窥探一下.由于主要问题是动态加载内容,我决定放大我在Wordpress上使用AJAX的方法:

到目前为止,我从Emanuele Feronato的一篇精彩帖子(用Ajax和jQuery加载WordPress帖子)中得到了一个小小的想法.他基本上将帖子ID存储在可点击链接的rel属性中,然后调用它.好吧,还有一些其他步骤可以使这项工作,但我现在只提到帖子ID的原因是因为它似乎是方程式中唯一不正确的部分; post ID加载到链接的rel属性中,但无法加载到.load函数中.

只是为了让你更好地了解我到目前为止在我的标记中得到了什么:

HEADER.PHP中的AJAX/JQUERY

$(document).ready(function(){

    $.ajaxSetup({cache:false});
    $(".trick").click(function(){
        var post_id = $(this).attr("rel");
        $("#single-home-container").html("loading...");
        $("#single-home-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id});
    return false;
    });

});
Run Code Online (Sandbox Code Playgroud)

的index.php

<?php get_header();?>

<!--home-->
<div id="home">

<!--home-bg-->
<img class="home-bg" src="<?php bloginfo('template_url');?>/images/home-bg.jpg" />
<!--home-bg-->

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>">

        <div class="box element col<?php echo rand(2,4); ?>" id="<?php $category = get_the_category(); echo $category[0]->cat_name; ?>">               

            <?php the_post_thumbnail(); ?>

            <span class="title"><?php the_title(); ?></span>    

            <span class="ex"><?php …
Run Code Online (Sandbox Code Playgroud)

php ajax wordpress jquery

27
推荐指数
2
解决办法
5万
查看次数

更流畅的Jquery动画

有另外一个关于这个的线索,但它没有得到解决,可能是因为我在我的问题中不是很清楚.

只是想再试一次,希望我能够解决这个问题:

我最近的任务是创建一个单页网站,模仿基本的Flash动画,即滑入和淡入元素.

当我进行交互式模拟时,我遇到了一个很大的问题 - 不稳定的动画.这个问题出现在屏幕大于18英寸的Mac上,无论浏览器和低于18的Mac都只针对FF版本3及以下版本.在PC上,动画几乎完美无缺.

这是我的jquery代码,受影响的元素用ids#md1,#md2和#md3标记:

$(document).ready(function () {
    $('#md1').animate({ top: "-60px" }, 500);
    $('#md2').animate({ top: "60px" }, 800);
    $('#md3').animate({ left: "60px" }, 1000);
    $('.home').fadeTo(3000, 0.8);
    $('#bg-img-4').fadeTo(1200, 1);
    $('#menu').fadeTo(4000, 1);
    $('#copyright').fadeTo(4000, 1);
});
Run Code Online (Sandbox Code Playgroud)

我采用了各种优化方法,包括在索引页面上缓存受影响的div中存在的图像,然后将用户重定向到实际页面并排队动画,但没有任何效果.

这真的很令人沮丧,因为我似乎已经用尽了我所知道的所有可用方法,而且我似乎无法让它在Mac上运行良好.

我有一种直觉,认为我正在编写太多关于文档准备的动画,这导致了迟缓 - 任何人都可以确认这是否是主要原因,如果有任何其他方法我可以解决这个问题?

非常感谢你的帮助.非常感谢=)

html jquery jquery-animate

6
推荐指数
1
解决办法
895
查看次数

标签 统计

jquery ×2

ajax ×1

html ×1

jquery-animate ×1

php ×1

wordpress ×1