js实现无缝滚动

html结构:

 <div class="qw-slide-box"> 
 <ul class="js-slide-list">
 <li>
 <p>1您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 <li>
 <p>2您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 <li>
 <p>3您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 <li>
 <p>4您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 <li>
 <p>5您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 <li>
 <p>6您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 <li>
 <p>7您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 <li>
 <p>8您成功使用300ml饮用水</p><span>2018-05-16 15:39:26</span>
 </li>
 </ul>
 </div>

实现思路:
获得js-slide-list下第一个li元素的高度,对它的height或marginTop进行一个从有到无的动画变化,代码如下:

var doscroll = function(){
 var $parent = $('.js-slide-list');
 var $first = $parent.find('li:first');
 var height = $first.height();
 $first.animate({
 height: 0 //或者改成: marginTop: -height + 'px'
 }, 500, function() {// 动画结束后,把它插到最后,形成无缝
 $first.css('height', height).appendTo($parent);
 // $first.css('marginTop', 0).appendTo($parent);
 });
 };
 setInterval(function(){doscroll()}, 2000);

 

赞(0) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » js实现无缝滚动
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏