【转】jquery特效:无缝向上循环滚动列表

本文介绍了一种使用JavaScript和jQuery实现的列表自动滚动效果。通过获取列表项高度并应用动画,使列表每隔一段时间向上移动一个项目高度,营造流畅滚动视觉。代码示例详细展示了HTML结构、CSS样式及关键的JavaScript逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原文链接:https://segmentfault.com/a/1190000000701184

 

预期效果:

整个列表间隔设定的时间向上移动一个item的高度

实现思路:

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

 

html:

<div class="slide-title">
    <span>title1</span>
    <span>title2</span>
    <span>title3</span>
</div>
<div class="slide-container">
    <ul class="slide-list js-slide-list">
        <li class="odd"><span>item1</span><span>item1</span><span>item1</span></li>
        <li class="even"><span>item2</span><span>item2</span><span>item2</span></li>
        <li class="odd"><span>item3</span><span>item3</span><span>item3</span></li>
        <li class="even"><span>item4</span><span>item4</span><span>item4</span></li>
    </ul>
</div>

 

css:

.slide-title{
    background: rgba(0,0,0,.5);
    color: #fff;
    height: 34px;
    line-height: 34px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: bold;    
}
.slide-title span{
    float: left;
    margin-right: 14px;    
}
.slide-title span:nth-child(1),
.slide-list li span:nth-child(1){
    width: 60px;
}
.slide-title span:nth-child(2),
.slide-list li span:nth-child(2){
    width: 90px;
}
.slide-title span:nth-child(3),
.slide-list li span:nth-child(3){
    width: 90px;
    margin-right: 0px;
}

.slide-container{
  position: relative;
  overflow: hidden;
   height: 90px;
}
.slide-list{
  position:absolute;
  width:100%;
  left:0;
  top:0;
  color:#000;
   margin:0;
    padding:0;
}
.slide-list li {
  height:30px;
  line-height:30px;
  list-style:none;
   margin:0;
   padding:0 10px;
}
.slide-list li span {
  display:inline-block;
  margin-right:14px;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.slide-list li.odd{
    background: rgba(51,79,109,.3);
}
.slide-list li.even{
    background: rgba(51,79,109,.1);
}

 

JavaScript + jQuery 1.8.3 :

var doscroll = function(){
     var $parent = $('.js-slide-list');
     var $first = $parent.find('li:first');
     var height = $first.height();
     $first.animate({
         height: 0
         }, 500, function() {
         $first.css('height', height).appendTo($parent);
     });    
};
setInterval(function(){doscroll()}, 2000);

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值