图片不间断滚动的特效代码详细讲解--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的方法,大家还是需要不断的学习,可能才能完全明白和掌握,我这里不可能一一都讲清楚。好了,收工!

你可能感兴趣的:(IE,Firefox,CSS,浏览器,.net,asp/asp.net学习)