图片不间断滚动的特效代码详细讲解--3

 

 

转自：http://www.g168.net/html/JspServlet_1/2008/1129/081129916BGKC86CH12CA8B7B90ED_3.html

 

刚才给大家介绍了JS的一些知识点，现在就讲下相关的CSS技巧。

#container{
    margin:0 auto;
    margin-top:10px;
    width:720px;
    height:100px;
    overflow:hidden;
}

一定要“overflow:hidden;”，为什么？呵呵，看看我们把高度设置为了height:100px;，正好是只一行信息的高度，如果你不overflow:hidden，在firefox也许没有问题，它会严格按照你指定的高度显示相应高度的内容，而隐藏多余的部分（多余的5行），而在IE中，一直就自做聪明把容器挤高，让它把里面的全部内容都显示出来。而我们的效果也是只显示一行，而隐藏多余的5行。

你可能要问了，怎么有多余的5行？呵呵，其实代码中已经解释了：

// 创建复制内容节点
    var copydiv = document.createElement('div');
    // 这个地方感觉有点嵌妥
    // 直接使用element.id的方式，不过看上去，主流的浏览器都支持
    // 标准的DOM Core方法：
    // copydiv.setAttribute('id',s_area.id + "_copymsgid")
    copydiv.id = s_area.id + "_copymsgid";
    // 复制原始的信息
    // 将原始的信息s_msg中的内容，直接用innerHTML写到
    copydiv.innerHTML = s_msg.innerHTML;
    // 设置复制信息节点的高度
    copydiv.style.height = this.msgHeight + "px";
    // 将复制节点添加到原始接点（scrollMsg）后
    // 其实实现的方法就是将复制信息节点（copydiv）添家到显示区域的节点（scrollArea）中
    s_area.appendChild(copydiv);

因为我们又复制了一份信息，并添加到要显示滚动信息的容器中了，所以3行变6行了。

呵呵，接下的也没有什么好讲了，大家看我的注释，应该可以很清楚了。唯一要注意的一点就是这里

        // 滚动高度等于显示滚动区域高度时（滚动完一行，一行内容全部显示）
        // 暂停4秒中，然后再开始执行下依次滚动。
        if (o.scrollHeight % s_area.offsetHeight == 0) {
            o.scrollTimer = setTimeout(anim, o.speed);
        }
        else {
            // 在两行内容之间过度滚动时，每10豪秒上升1px
            o.scrollTimer = setTimeout(anim, 10);
        }

o.scrollHeight % s_area.offsetHeight == 0，要明白它确切的意思。

#container{
    margin:0 auto;
    margin-top:10px;
    width:720px;
    height:100px;
    overflow:hidden;
}
#message,
#message_copymsgid{
    margin:0;
    width:720px;
    overflow:hidden;
}
#container ul{
    float:left;
    width:720px;
    height:100px;
    overflow:hidden;
    clear:both;
}

ul也就是我们一行的高度为100px，o.scrollHeight已经滚动的高度。呵呵，不知道你发现了问题没有？

对了，问题就在 % s_area.offsetHeight，我之所以没有更正原程序里的这个缺点，是因为如果你不对#container做任何修饰，这么写没有错。因为s_area也就是#container这里我只定义了height:100px;，如果我要是这么写：

#container{
    margin:0 auto;
    margin-top:10px;
    width:720px;
    height:100px;
    overflow:hidden;
    border:1px;
    padding:1px;
}

呵呵，你觉得会有什么结果？这里我就卖个官子，给大家出个作业，看看像我这样做了会，有一个什么结果，还有o.scrollHeight % s_area.offsetHeight == 0要怎么改该呢？

好了，特效讲解完毕，也不知道我这么讲解一个特效，对你有没有帮助。像里面的ceateElement,appendChild等等DOM的方法，大家还是需要不断的学习，可能才能完全明白和掌握，我这里不可能一一都讲清楚。好了，收工！