0

我正在尝试在不使用任何插件的情况下为文字新闻创建自定义新闻代码。我在JS领域很弱。请帮忙处理 JS 部分。

PHP小部件：

<?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $author_id=$post->post_author;
    $args = array('cat'=> 7, 'posts_per_page' => 5, 'paged' => $paged, 'orderby' => date, 'order' => ASC );        
    query_posts( $args);

    while (have_posts()) : the_post();?>

        <ul class="list-6" id="ticker">
            <li>
                <h5>
                    <a class="upcomnig" href="<?php the_permalink() ?>" title="<?php the_title();?>">
                        <?php echo get_upcoming_date();?> 
                        <span style="font-size:16px; color: #fe5e08"><?PHP echo get_upcoming_title(); ?></span>
                    </a>
                </h5>
            </li>   
        </ul>

<?php   endwhile;?>

CSS：

ul#ticker {
    width: 220px;
    height: 120px;
    overflow: hidden;
}

我怎样才能为此编写 javascript 代码以获得真正的新闻行情？

[编辑] 我创建了这个新闻代码：http: //jsfiddle.net/riffaz/92s92k1d/它在小提琴中运行良好。

我正在尝试将此代码添加到该站点。为此，我将此代码放在PHP 小部件上

<?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $author_id=$post->post_author;
    $args = array('cat'=> 7, 'posts_per_page' => 5, 'paged' => $paged, 'orderby' => date, 'order' => ASC );        
    query_posts( $args);?>  
        <ul class="list-6 ticker" style="height: 82px;">
            <?PHP while (have_posts()) : the_post();?>
            <li>
                <h5>
                    <a class="upcomnig" href="<?php the_permalink() ?>" title="<?php the_title();?>">
                        <?php echo get_upcoming_date();?> 
                        <span style="font-size:16px; color: #fe5e08"><?PHP echo get_upcoming_title(); ?></span>
                    </a>
                </h5>
            </li>   
            <?php   endwhile;?> 
        </ul>

我把这行放到子主题style.php 

.ticker {
    height: 75px;
    overflow: hidden;
}

然后在子主题 footer.php ：我把以下代码（在标签正上方）：

function tick(){
        $('.ticker li:first').slideUp( function () { $(this).appendTo($('.ticker')).slideDown(); });
    }
    setInterval(function(){ tick () }, 5000);

它在我的主页上没有任何作用。它停留在它们在主页上的位置。但是，如果我去任何页面，它都可以正常工作。诡异的。任何想法如何解决这一问题？

http://www.ldjf.org/看右下角区域.. 页脚区域 即将发生的事件

4

1 回答 1

0

期望社区为您提供构建自定义 Javascript 工具的代码是一个很大的要求。我建议你看看一些 jQuery 文档。

你已经有了一个 PHP 帖子列表，所以从 jQuery 的 each 方法开始 - http://api.jquery.com/each/

然后为你的股票决定一些行为：

http://api.jquery.com/delay/

http://api.jquery.com/category/effects/sliding/

http://api.jquery.com/category/effects/fading/

我认为这些都是很好的起点。查看文档，使用一些示例代码进行更新。很高兴看看你放在一起的东西。祝你好运！

[编辑]

因此，我确实只看到了您的代码本身的一个问题：您的 CSS.ticker在您的主题中分配了 350px 的高度。你说你分配了一个 75px 的高度，但你也说你把它放在 style.php 中。因此可能存在缓存问题，或者您可能将 CSS 放入了错误的文件中。u-design-child/style.css显示 350px 高度。

不过，我会对您的代码提出一些建议。最大的是我不会限制父元素的高度只是为了“隐藏”你的子元素。您已经在使用 jQuery 将其从视图中删除。在您再次需要它之前将其放在视线之外，而不是立即将其带回来。这将允许您的内容在高度上可变，同时保持全视图并且不会从底部被切断。在你的 PHP 中，首先<li>正常显示你的，然后是其他的<li style="display:none;">。然后使用 jQuery，遍历您的列表，根据需要打开和关闭可见性。我认为这会得到你想要的行为。看看这个http://jsfiddle.net/92s92k1d/21/

于 2014-08-13T19:06:02.590 回答