转自: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的方法,大家还是需要不断的学习,可能才能完全明白和掌握,我这里不可能一一都讲清楚。好了,收工!
分享到:
相关推荐
不间断滚动图片js代码。利用javascript实现,图片添加到一定条数才会不间断滚动
本资源主要适用于在制作网页中,需要图片浏览的朋友准备的,即使不会JAVSCRIPT也会看懂的,将达到自己所需要的效果,加以修改。
图片不间断滚动,当鼠标移上停止,鼠标离开继续滚动
不间断滚动文字 图片 不间断滚动文字 图片
不间断滚动 支持鼠标经过停止 文字图片不间断向下 向上滚动
网页中图片的不间断上下左右滚动,下载下来改成HTML文件,插入网页内部,把图片改成自己的就行了
js图片不间断滚动代码,常用于网页中的图片
推荐通用文字图片JS不间断滚动封装类 代替Marquee
图片不间断向左滚动,找了一下午,终于找到了!
图片文字不间断滚动,图片文字不间断滚动,图片文字不间断滚动,图片文字不间断滚动
Javascript实现图片不间断滚动的代码_.docx
Marquee Scroll通用不间断滚动JS封装类,各种方向滚动,调用十分简单!~
js水平滚动永不间断的广告特效js水平滚动永不间断的广告特效
不间断滚动图片特效打包下载
不间断无缝滚动图片 不间断 无缝 滚动图片效果 js 动态
一个可以代替Marquee走马灯特效的图片滚动封装类,它可控制图片做无缝循环滚动,可以在上下左右四个方面滚动,而且具备丰富自定义设置功能。它的特点: 横向、纵向滚动格式调整 (解决横向滚动换行的问题,无需特殊...
js实现鼠标点击 图片无间断横向滚动。效果比较好!
不间断图片左右滚动代码演示,很好用的一个js .可以调试图片以及图片大小 根据自己的需要...
NULL 博文链接:https://xiaocheng.iteye.com/blog/406153
图片不间断向下滚动JS代码