自动滚动的效果实现

yy406961 2017-04-18 09:20:33

我在网上参照别人的代码，写了一个自动滚动，但是他的有往上移动的效果，我的是直接变，没有中间那段效果。求大神帮忙看看是什么问题。

这是他的代码滚动效果，可以看到是往上移动的。
这是他的代码，他用的是ul li

$(function () {

    var $this = $("#news");

    var scrollTimer;

    $this.hover(function () {

      clearInterval(scrollTimer);

    }, function () {

      scrollTimer = setInterval(function () {

        scrollNews($this);

      }, 1000);

    }).trigger("mouseleave");

    function scrollNews(obj) {

      var $self = obj.find("ul");

      var lineHeight = $self.find("li:first").height();

      $self.animate({

        "marginTop": -lineHeight + "px"

      }, 600, function () {

        $self.css({

          marginTop: 0

        }).find("li:first").appendTo($self);

      })

    }

  })

这是我的效果

我的没有往上移动的效果。我用的是table里的td
这是我的代码



$(function(){

  //设置右下角列表的滚动状态

  var $this=$("#phone_num");

  //为滚动列表添加定时器

  setInterval(function(){

    scrollPhone($this);

  },2000);

  //修改列表的marginTop值，同时将当前第一行调至最后一行

  function scrollPhone(obj){

    var $self=obj.find("tbody");

    var lineHeight=$self.find("tr:first").height();

    $self.animate({

      "marginTop":-lineHeight+"px",

    },600,function(){

      $self.css({

        marginTop:0

      }).find("tr:first").appendTo($self);

      $self.find("tr:first span").addClass("active");

      $self.find("tr:last span").removeClass("active");

    })

  }

})