关于滚动图片停在浏览器边界上的一点解决办法(个人愚见)。。
2011-04-27 22:41
363 查看
最近开始学习javascript,想写个滚动图片的脚本来试试。
想想这种脚本的模板网上应该有许多,果断百度之,果然一堆,然后复制了一个代码下来试试,大概如下(向上滚动):
自己拿来试了试,发现图片只滚动了一点便停住了,看这停位置强烈怀疑是停在了浏览器边界上(实验的3幅图均为240*320,浏览器IE6)。
在网上也查了些资料,感觉问题应该是处在scrollTop,offsetHeight等等之上。于是乎在demo2.innerHTML=demo1.innerHTML之后,添了
一句话进行验证:
document.writeln(demo.offsetTop+" "+demo1.offsetHeight+" "+demo.offsetHeight+" "+document.body.offsetHeight);
结果呢?
惊奇地发现demo1.offsetHeight值为0;
根据offsetHeight的定义:IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
怎么看都不可能为0吧!
想想,觉得是不是给demo1添加图片后,其本身的height并无任何变化,于是手动修改了下demo1,如下:
<div id="demo1" style="width:240px; height:960px ">
还真就能行了,图片也滚动了,demo1.offsetHeight也有值了。
虽然原理依然还是不太清楚,不过从程序中明显可以读出,若demo1.offsetHeight为0时,那么图片滚动到浏览器顶部时就会停住。
应该是在向demo1中添加图片时,其offsetHeight是不变且为0的,而手动添加height才能修改offsetHeight的值。
初学者的愚见,不知对否。
PS:从脚本中还能读出,只有当demo1的总height大于demo的height时,脚本能正常运行。
PS: PS: 又想了想,不对,其实PS里说的是错的.脚本中没哪个地方说了要demo1的总height要大于demo的height啊.于是,今天又试了试,发现其实
demo的scrollTop是有上界的,而这个上界应该是(从我的例子来看,3幅图的总height为960px,测试中我将demo的height设为1000px):
scrollTop的最大值=(960+960)(demo1与demo2的总height) - 1000(demo的height)=920px
(因为控件认为只要多加920px的范围,全部图片都至少能正常显示一遍)
所以当scrollTop达到920时.将不再增加,图片就停住了.
之后我对代码又进行了一些修改,如下:
13行 demo2.offsetTop-demo.scrollTop<=0 改成 demo1.offsetHeight<=demo.scrollTop
(因为demo2的offsetTop还包括了边框距离)
那么,结论是,要使demo1.offsetHeight<=demo.scrollTop能够达到,至少需要:
2*demo1.height - demo.height >=demo1.height 推出 demo1.height >= demo.height; (前提:demo2是完全从demo1复制过来的)
想想这种脚本的模板网上应该有许多,果断百度之,果然一堆,然后复制了一个代码下来试试,大概如下(向上滚动):
<div id=demo style="overflow:hidden;height:150px;width:260px;background:#214984;color:#ffffff;"> <div id="demo1"> <img src="img1.gif"/> <img src="img2.gif"/> <img src="img3.gif"/> </div> <div id="demo2"></div> </div> <mce:script type="text/javascript"> var speed=30; //数字越大速度越慢 demo2.innerHTML=demo1.innerHTML; //克隆demo1为demo2 function Marquee(){ if(demo2.offsetTop-demo.scrollTop<=0){//当滚动至demo1与demo2交界时 demo.scrollTop-=demo1.offsetHeight;} else{ demo.scrollTop++; } } var MyMar=setInterval(Marquee,speed); demo.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
自己拿来试了试,发现图片只滚动了一点便停住了,看这停位置强烈怀疑是停在了浏览器边界上(实验的3幅图均为240*320,浏览器IE6)。
在网上也查了些资料,感觉问题应该是处在scrollTop,offsetHeight等等之上。于是乎在demo2.innerHTML=demo1.innerHTML之后,添了
一句话进行验证:
document.writeln(demo.offsetTop+" "+demo1.offsetHeight+" "+demo.offsetHeight+" "+document.body.offsetHeight);
结果呢?
惊奇地发现demo1.offsetHeight值为0;
根据offsetHeight的定义:IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
怎么看都不可能为0吧!
想想,觉得是不是给demo1添加图片后,其本身的height并无任何变化,于是手动修改了下demo1,如下:
<div id="demo1" style="width:240px; height:960px ">
还真就能行了,图片也滚动了,demo1.offsetHeight也有值了。
虽然原理依然还是不太清楚,不过从程序中明显可以读出,若demo1.offsetHeight为0时,那么图片滚动到浏览器顶部时就会停住。
应该是在向demo1中添加图片时,其offsetHeight是不变且为0的,而手动添加height才能修改offsetHeight的值。
初学者的愚见,不知对否。
PS:从脚本中还能读出,只有当demo1的总height大于demo的height时,脚本能正常运行。
PS: PS: 又想了想,不对,其实PS里说的是错的.脚本中没哪个地方说了要demo1的总height要大于demo的height啊.于是,今天又试了试,发现其实
demo的scrollTop是有上界的,而这个上界应该是(从我的例子来看,3幅图的总height为960px,测试中我将demo的height设为1000px):
scrollTop的最大值=(960+960)(demo1与demo2的总height) - 1000(demo的height)=920px
(因为控件认为只要多加920px的范围,全部图片都至少能正常显示一遍)
所以当scrollTop达到920时.将不再增加,图片就停住了.
之后我对代码又进行了一些修改,如下:
13行 demo2.offsetTop-demo.scrollTop<=0 改成 demo1.offsetHeight<=demo.scrollTop
(因为demo2的offsetTop还包括了边框距离)
那么,结论是,要使demo1.offsetHeight<=demo.scrollTop能够达到,至少需要:
2*demo1.height - demo.height >=demo1.height 推出 demo1.height >= demo.height; (前提:demo2是完全从demo1复制过来的)
相关文章推荐
- 关于某段代码不能使图片滚动的解决办法!
- 关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
- div css 浏览器兼容问题的一点解决办法
- 关于在编译器中图片能正常显示,当导出jar包后图片不能显示的解决办法/JAVA
- 关于IE6和IE7关闭窗口时提示和不提示以及上传图片前的本地预览解决办法
- ios微信浏览器-div设置滚动-不出现滚动条的解决办法
- ExtJs关于grid高度自适应浏览器的问题解决办法
- 关于浏览器Security error code: 1000错误的解决办法
- 关于在项目中进行图片上传和读取展示的解决办法
- iOS开发 关于tableView加载图片时出现卡顿时的解决办法
- 关于kindeditor上传图片出现"服务器发生故障"的解决办法
- 关于Mozilla浏览器不支持innerText的解决办法
- oc中关于延迟执行代码的一点解决办法
- 关于UEditor远程图片上传失败的解决办法
- 浏览器不支持PNG图片背景透明的解决办法
- 关于uitableviewcell用到image属性时图片大小不同解决办法
- 关于制作JS滚动特效常用的ScrollPic.js文件在IE6下不兼容的解决办法
- 关于kindeditor上传图片出现"服务器发生故障"的解决办法
- 关于出现错误:_tkinter.TclError: couldn't open "E:\Python系列\Python程序\Python安装.gif"tkinter中不能打开GIF格式图片的解决办法
- 关于ipad设备滚动条无法滚动的解决办法