scrollLeftscrollTop滚动代码的总结.docx
《scrollLeftscrollTop滚动代码的总结.docx》由会员分享，可在线阅读，更多相关《scrollLeftscrollTop滚动代码的总结.docx（6页珍藏版）》请在冰点文库上搜索。
scrollLeftscrollTop滚动代码的总结
scrollLeft,scrollTop,滚动代码的总结
scrollLeft,scrollTop,滚动代码的总结
今天和兄弟一起研究了一下横向和竖向图片滚动的代码，很兴奋，因为解决了几个小问题
第一个：
for（vari=1;i<50;i++）
{
document.getElementById（"TextBox1"）.scrollTop++;
document.getElementById（"TextBox1"）.scrollLeft++;
}
我刚开始的时候写成了
for（inti=1;i<50;i++）
{
//document.getElementById（"TextBox1"）.scrollTop++;
document.getElementById（"TextBox1"）.scrollLeft++;
}
IE提示错误，Exception;我半天不知道怎么回事，最后才发现是犯了个很低级的错误，javascript中的
变量用var定义，可以不定义！
下面入正题
clientHeight
大家对clientHeight都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看
到内容的这个区域的高度。
offsetHeight
IE、Opera认为offsetHeight=clientHeight+滚动条+边框。
NS、FF认为offsetHeight是网页内容实际高度，可以小于clientHeight。
scrollHeight
IE、Opera认为scrollHeight是网页内容实际高度，可以小于clientHeight。
NS、FF认为scrollHeight是网页内容高度，不过最小值是clientHeight。
简单地说
clientHeight就是透过浏览器看内容的这个区域高度。
NS、FF认为offsetHeight和scrollHeight都是网页内容高度，只不过当网页内容高度小于等于
clientHeight时，scrollHeight的值是clientHeight，而offsetHeight可以小于clientHeight。
IE、Opera认为offsetHeight是可视区域clientHeight滚动条加边框。
scrollHeight则是网页内容实际高度。
同理
clientWidth、offsetWidth和scrollWidth的解释与上面相同，只是把高度换成宽度即可。
说了半天还是给个图吧
那么当容器如div中的table的宽大与定义的div的宽的时候，这个时候ScrollLeft++是可以起作用的！
example
<body>
<formid="form1"runat="server">
<divid="demo">
<asp:
TextBoxID="TextBox1"runat="server"Height="50px"TextMode="SingleLine"Width="200px"Wrap="False">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</asp:
TextBox>
<inputid="Button1"type="button"value="button"onclick="scrolltop1（）"/></div>
<scriptlanguage="javascript"type="text/javascript">
functionscrolltop1（）
{
for（vari=1;i<50;i++）
{
document.getElementById（"TextBox1"）.scrollTop++;
document.getElementById（"TextBox1"）.scrollLeft++;
}
window.alert（document.getElementById（"TextBox1"）.scrollTop）;
window.alert（document.getElementById（"TextBox1"）.scrollWidth）;
window.alert（document.getElementById（"TextBox1"）.scrollLeft）;
}
</script>
</form>
</body>
而这里的document.getElementById（"TextBox1"）.scrollTop++;是不能起作用的！
为什么呢？
因为他的容器的
高scrollHeight不大于定义的<asp:
TextBoxID="TextBox1"runat="server"Height="50px">中的50px
如果大于就可以起作用了，如
<body>
<formid="form1"runat="server">
<divid=demo>
<asp:
TextBoxID="TextBox1"runat="server"Height="24px"TextMode="MultiLine"Width="30px"Wrap="False">
fghdsfgfdgdf
guj</asp:
TextBox>
<inputid="Button1"type="button"value="button"onclick="scrolltop1（）"/></div>
<scriptlanguage="javascript"type="text/javascript">
functionscrolltop1（）
{
for（vari=1;i<500;i++）
{
document.getElementById（"TextBox1"）.scrollTop++;
document.getElementById（"TextBox1"）.scrollLeft++;
}
window.alert（document.getElementById（"TextBox1"）.scrollWidth）;
window.alert（document.getElementById（"TextBox1"）.scrollLeft）;
}
</script>
</form>
</body>
这个时候，scrollleft和scrolltop都是可以起作用的，这里给我们一起提示
要想用这两个家伙就必须把实际的内容弄得多于定义的容器的width和height
下面给出横向移动的代码
Code
在给出竖向移动的代码
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
</head>
<body>
<divid="demo"style="height:
72px;width:
180px;overflow:
hidden">
<divid="demo1">
<divalign="center">
<imgsrc="image/iecool001.gif"/>
<imgsrc="image/iecool002.gif"/>
<imgsrc="image/iecool003.gif"/>
<imgsrc="image/iecool004.gif"/>
<imgsrc="image/iecool005.gif"/>
<imgsrc="image/iecool006.gif"/>
</div>
</div>
<divid="demo2"></div>
<!
--滚动的javascript-->
<script>
varspeed1=8
demo2.innerHTML=demo1.innerHTML
functionMarquees1（）{
if（demo2.offsetTop-demo.scrollTop<=0）
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
varMyMars1=setInterval（Marquees1,speed1）
demo.onmouseover=function（）{clearInterval（MyMars1）}
demo.onmouseout=function（）{MyMars1=setInterval（Marquees1,speed1）}</script>
</div>
</body>
</html>
其实代码是比较简单的，只是要理解其意思就可以了！
升级会员 