原标题:html标签overflow属性和javascript实现div标签滚动
昨天一个朋友说他实现了一个div循环滚动显示的demo,但是弄到jsp中就不滚动了,而且debug测试div的scrollTop值一直为0。
拿到他的jsp文件看,java代码没有什么问题,问题就是出在html标签overflow属性上,一般,设置滚动显示的div都会设置这个值,如果没有设置这个属性,java的循环滚动显示代码就没有效果,而且输出scrollTop值也一直为0.
一般在html中直接写css,不会出现这个问题。但是很多css都是写在外部的,有时候,很多属性值嵌套,特别是类属性设置,有时候导致需要滚动的div的overflow属性并没有设置成功。这样页面就不会滚动,而且大部分检查bug都是盯着java代码来排错。这样就很容易找不出错误,并花费了很多时间。
java中实现循环滚动也比较简单,如果是整个div无缝滚动显示,我是用2个同样的div阶梯显示实现的。
测试语句 测试语句 测试语句 测试语句 测试语句 测试语句测试
测试语句
测试语句
测试语句
测试语句
测试语句
测试语句
测试语句
测试语句
测试语句
测试语句
获取div标签function getobj(element)
{ return document.getElementById(element);}//
声明div标签变量var toplabel=getobj("label2");var bottomlabel=getobj("label3");//定义div标签长度常量MAX_HEIGHT=80;MIN_HEIGHT=1;//
声明并初始化变量var t;//计时器var speed=5;//
滚动速度var height=MAX_HEIGHT;//top div长度var bottomheight=MIN_HEIGHT;//
bottom div长度bottomlabel.innerHTML=toplabel.innerHTML;//
复制top内容到bottom,用来循环滚动显示function move(){ //
当top滚动值scrollTop+offsetHeight等于top div的scrollHeight时。topdiv停止滚动,并减少top div的style.height值 if ((toplabel.scrollTop+toplabel.offsetHeight)>=toplabel.scrollHeight)
{ toplabel.style.height=height-=speed; bottomlabel.style.height=bottomheight+=speed; //减少top heigth并同步增加bottom height,这样,可以实现无缝滚动。
if (height
同时再改变top和bottom的height的值,然后继续递增top的scrollTop,实现滚动。 } } toplabel.scrollTop+=speed; t=setTimeout(move,100); //
定义计时器,并递增top scrollTop。}//启动和鼠标进入,离开执行函数。实现鼠标移动上去停止滚动,离开继续滚动move();function stop(){ clearTimeout(t);}function start(){ t=setTimeout(move,100);}>
还有一个更简便的方法,就是直接把最上层div的scrollTop值减去bottomlabel.offsetHeight值,得到起点值,重新开始循环。
测试语句 测试语句 测试语句 测试语句 测试语句 测试语句测试
测试语句
测试语句
测试语句
测试语句
测试语句
测试语句
测试语句
测试语句
测试语句
声明div标签变量var toplabel=getobj("label2");var bottomlabel=getobj("label3");var label=getobj("label1");var text=getobj("text");//
声明并初始化变量var t;//计时器var speed=5;//滚动速度bottomlabel.innerHTML=toplabel.innerHTML;//
复制top内容到bottom,用来循环滚动显示function move(){ //当label的scrollTop值大于等于toplabel.scrollHeight时,减少label的scrollTop为起点。
if (label.scrollTop>=toplabel.scrollHeight) { label.scrollTop-=bottomlabel.offsetHeight; } label.scrollTop+=speed; t=setTimeout(move,100); //
定义计时器,并递增top scrollTop。 }//
启动和鼠标进入,离开执行函数。实现鼠标移动上去停止滚动,离开继续滚动move();function stop(){ clearTimeout(t);}function start(){ t=setTimeout(move,100);}>
更多内容,参考最模板网站()
本文来自网络
责任编辑: