11行代码实现滚动公告栏

使用JavaScript&jQuery

效果图:

 

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

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

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 ('#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)