JavaScript滚动信息的CSS要点 – hexiaomin

    如果用jQuery做滚动信息，在《锋利的jQuery》书中已经讲解得很详细啦，书中的源代码可以在网上下载的。但，其中，有一些关键的CSS要点，如果不使用的话，是不能达到很好的滚动效果的。

    假如有很多信息，每时每刻要显示4行滚动信息，html如下：

<div class=”scrollNews”>
     <ul>
       <li><a href=”#”>甜美宽松毛衣金秋一定红。</a></li>
       <li><a href=”#”>秋装百搭小马甲不到50元。</a></li>
       <li><a href=”#”>修身韩版小西装万人疯抢。</a></li>
       <li><a href=”#”>长袖雪纺衫单穿内搭都超美。</a></li>
       <li><a href=”#”>昨天回家看到小狗狗和狗妈妈。</a></li>
       <li><a href=”#”>前天买啦水培植物一顶红。</a></li>
       <li><a href=”#”>喜欢吃鱼主动吃鱼就不会游泳。</a></li>
       <li><a href=”#”>想吸烟现在就赶紧去死吧。</a></li>
     </ul>

</div>

（1）如何让每条信息达到边滚动边消失的效果呢？必须固定<li>的高度，而且要让溢出的部分隐藏，如果不这样设置，滚动时，信息不会马上消失，而是往上跑啦，第一行的信息甚至会覆盖在<div>上方的标题上（假设信息是向上滚动的），CSS如下：

.scrollNews ul li
{
line-height:20px;
overflow:hidden;
}

（2）如何保持总是只有4条信息在参与滚动呢？从上面的html可以看出，有不止4条信息，在实际中更是不确定的信息数量，所以要按照设置<li>的方式来设置<div>，<div>的高度要设置成4倍的<li>的值，并且一定要将<div>的位置属性设成“relative”，否则是不会达到预期效果的，CSS如下：

.scrollNews
{
height:80px;
overflow:hidden;
position:relative;
}