So implementieren Sie mit JavaScript und jQuery ein scrollendes Bulletin Board (Codebeispiel)

本篇文章给大家带来的内容是关于如何利用JavaScript&jQuery实现滚动公告栏（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

首先看HTML结构，css样式这里不再给出

<div class="book_class">
                <div id="dome">
                    <div id="dome1">
                        <ul id="express">
                            <li>・2010考研英语大纲到货75折...</li>
                            <li>・权威定本四大名著（人民文...</li>
                            <li>・口述历史权威唐德刚先生国...</li>
                            <li>・袁伟民与体坛风云：实话实...</li>
                            <li>・我们台湾这些年：轰动两岸...</li>
                            <li>・畅销教辅推荐：精品套书50...</li>
                            <li>・2010版法律硕士联考大纲75...</li>
                            <li>・计算机新书畅销书75折抢购</li>
                            <li>・2009年孩子最喜欢的书>></li>
                            <li>・弗洛伊德作品精选集59折</li>
                            <li>・畅销教辅推荐：精品套书50...</li>
                        </ul>
                    </div>
                </div>
            </div>

js代码

请首先确保已经引入jQuery

//滚动字
  //确保绝对定位
  //使用定时函数
  var top=0;  var t = setInterval(function () {    //先设置margin-top为0
    $("#express li:first").css("margin-top",top);    //li的高度为25，故这里以25判断第一行是否走出ul。
    if(top<-25){      //如果第一行已经走出ul，将top归零，为下个li做准备
      top=0;      //这句话的意思是，先将首行的top设为0，拷贝该行，放置最后一行
      //注意，如果这里不将第一行的top归零，拷贝后他将保持top=-25的状态，效果就是叠加在最后一行上。
      $("#express li:first").css("margin-top",top).clone(true).appendTo (&#39;#express&#39;);      //移除首行，这时第二行变为首行
      $("#express li:first").remove();
    }else{      //如果第一行还未走出ul，top自减
      top-=1;
    }
  },50);

额外的代码

实现当滚动时，鼠标放置后可以停止，移出时仍可以进行

//当鼠标放置后停止，松开继续走
  $("#express li").hover(function() {    //清除定时
    clearInterval(t);
  }, function() {
    t = setInterval(function () {      //先设置margin-top为0
      $("#express li:first").css("margin-top",top);      //li的高度为25，故这里以25判断第一行是否走出ul。
      if(top<-25){        //如果第一行已经走出ul，将top归零，为下个li做准备
        top=0;        //这句话的意思是，先将首行的top设为0，拷贝该行，放置最后一行
        //注意，如果这里不将第一行的top归零，拷贝后他将保持top=-25的状态，效果就是叠加在最后一行上。
        $("#express li:first").css("margin-top",top).clone(true).appendTo (&#39;#express&#39;);        //移除首行，这时第二行变为首行
        $("#express li:first").remove();
      }else{        //如果第一行还未走出ul，top自减
        top-=1;
      }
    },50);
  });

以上就是对如何利用JavaScript&jQuery实现滚动公告栏（代码实例）的全部介绍，如果您想了解更多有关JavaScript教程，请关注PHP中文网。

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit JavaScript und jQuery ein scrollendes Bulletin Board (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!