如何利用JavaScript&jQuery实现滚动公告栏（代码实例）

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

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

                

                    

                        

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

js代码

立即学习“Java免费学习笔记（深入）”；

请首先确保已经引入jQuery

一键职达

AI全自动批量代投简历软件，自动浏览招聘网站从海量职位中用AI匹配职位并完成投递的全自动操作，真正实现'一键职达'的便捷体验。

下载

//滚动字
  //确保绝对定位
  //使用定时函数
  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 ('#express');      //移除首行，这时第二行变为首行
      $("#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 ('#express');        //移除首行，这时第二行变为首行
        $("#express li:first").remove();
      }else{        //如果第一行还未走出ul，top自减
        top-=1;
      }
    },50);
  });

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