wordpress滚动公告栏

2016-01-09 23:50:44

今天在用到JQ滚动代码的时候,有点不顺,浪费了些时间,不记录一下还是比较健忘,简单的做个记录吧。

便于以后再次使用。

HTML结构

<ul id="list">
    <li>第一条消息</li>
    <li>第二条消息</li>
    <li>第三条消息</li>
</ul>

JQuery代码一:

function AutoScroll(obj){
        $(obj).find("ul:first").animate({
                marginTop:"-25px"
        },500,function(){
                $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
        });
}
$(document).ready(function(){
setInterval('AutoScroll("#list")',2000)
});

JQuery代码二:

$(document).ready(function(){
    $("#list li:not(:first)").css("display","none");
    var B=$("#list li:last");
    var C=$("#list li:first");
    setInterval(function(){
    if(B.is(":visible")){
    C.fadeIn(500).addClass("in");B.hide()
    }else{
    $("#list li:visible").addClass("in");
    $("#list li.in").next().fadeIn(500);
    $("li.in").hide().removeClass("in")}
    },3000) //每3秒钟切换一条,你可以根据需要更改
})

两端JQ代码都能实现效果,需要注意的是两端代码放的位置不同。

标签: ,,
Category:wordpress

2条留言 发表在 “wordpress滚动公告栏”

  1. 2016 年 01 月 11 日 07:34

    嗯,好记性不如烂笔头,最近对这些代码感兴趣 :razz:

  2. 2016 年 01 月 17 日 10:49

    好记性不如烂笔头