div两种滚动
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>test</title>
<style type="text/css">
.one,.two{height:200px;background-color:red;}
.two{background-color:yellow;}
.main{height:200px;overflow:auto;}
</style>
</head>
<body>
<div style="overflow: hidden; height: 156px; width: 330px;" id="latestNews">
<div id="newsOne">
<li><a href="NewsDetails.aspx?id=592" target="_blank">常用的服装陈列之9种方法</a></li>
<li><a href="NewsDetails.aspx?id=591" target="_blank">内衣加盟选址六技巧</a></li>
<li><a href="NewsDetails.aspx?id=589" target="_blank">成功分享：亮湾湾饰品店的八大陈列心得</a></li>
<li><a href="NewsDetails.aspx?id=588" target="_blank">内衣店接手店铺时应该注意的问题</a></li>
<li><a href="NewsDetails.aspx?id=587" target="_blank">三种开女士内衣店的人气店址推荐</a></li>
<li><a href="NewsDetails.aspx?id=586" target="_blank">内衣店接手店铺时应该注意的问题</a></li>
<li><a href="NewsDetails.aspx?id=585" target="_blank">门店销售点睛：内衣店的试衣间</a></li>
</div>
<div style="overflow: hidden; height: 156px;" id="newsTwo">
</div>
</div>
<script type='text/javascript'>
第一种滚动：
var newsOne = document.getElementById("newsOne");
var newsTwo = document.getElementById("newsTwo");
var latestNews = document.getElementById("latestNews");
newsTwo.innerHTML = newsOne.innerHTML;
function newsScroll() {
if ((latestNews.scrollHeight - latestNews.offsetHeight) <= latestNews.scrollTop)
latestNews.scrollTop = 0;
else
latestNews.scrollTop = latestNews.scrollTop + 1;
}
setInterval(newsScroll, 50);
第二种滚动：（需要设置latestNews的style：position:absolute;）
var newsOne = document.getElementById("newsOne");
var newsTwo = document.getElementById("newsTwo");
var latestNews = document.getElementById("latestNews");
newsTwo.innerHTML = newsOne.innerHTML;
function newsScroll() {
if (newsTwo.offsetTop - latestNews.scrollTop <= 0)
latestNews.scrollTop -= newsOne.offsetHeight;
else
latestNews.scrollTop = latestNews.scrollTop + 3;
}
setInterval(newsScroll, 300);
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>test</title>
<style type="text/css">
*{margin:0;}
#one,#two{height:200px;background-color:red;margin-top:100px;}
#two{background-color:yellow;height:300px;}
#main{height:200px;overflow:auto;margin-top:800px;}
</style>
</head>
<body>
<div id='main' >
<div id="one">第一个</div>
<div id="two">第二个</div>
</div>
</body>
</html>
<script type="text/javascript">
var one = document.getElementById("one");
var two = document.getElementById("two");
var main = document.getElementById("main");
</script>
1.在IE下offsetHeight与元素的style.height相等，但是在火狐下因为style.height不包括div的padding，所以火狐下offsetHeight与元素的style.height相等
不相等
2.offsetTop是元素的Border-top与已定位(包括position:absolute和position:relative两种方式)的祖先元素之间的逻辑距离(在IE6,7中如果父元素或者自己的style里height不为auto而为一个具体的像素值，则的offsetTop参考元素是其父元素)（例如，在上面由于main不是相对定位也不是绝对定位，所以two.offestTop参考父元素
为body，id为two的div的offsetTop为:main的margin-top + two的margin-top + 自身的margin-top + two的height=1200px）
3.cilentHeight不包括border的宽度
4.window.screen.height总是window.screen.availHeight大一些（因为任务栏占据一定高度，所以工作区域高度总是比分辨率小一点），但
是window.screen.width总是与window.screen.availWidth相等，且此四个属性都与浏览器是否缩放（即使浏览器最小化也一样）和浏览器的类型没有关系（IE，
Firefox都一样）
5.在火狐中，如果是标准兼容模式（即document.compatMode为CSS1Compat），则document.documentElement.scrollHeight要比document.body.scrollHeight大;
如果是渲染模式（即document.compatMode为BackCompat）,则则document.body.scrollHeight要比document.documentElement.scrollHeight大；但是不管声明模
式document.documentElement.scrollWidth和document.body.scrollWidth总是一样大
在IE中，如果是标准兼容模式（即document.compatMode为CSS1Compat），则document.documentElement.scrollHeight要
比document.body.scrollHeight大，document.documentElement.scrollWidth要比document.body.scrollWidth大（但是document.body.scrollHeight可能偏小很
多，例如浏览器窗口是全屏，但是document.body.scrollHeight只有几十px）;如果是渲染模
式（即document.compatMode为BackCompat）,则document.body.scrollHeight要比document.documentElement.scrollHeight大；document.body.scrollWidth要
比document.documentElement.scrollWidth大（并且document.body.scrollHeight取的值不会偏小很多）
还需要说明的是，不管在说明浏览器中document.documentElement.scrollWidth，document.documentElement.scrollHeight，document.body.scrollWidth，document.body.scrollHeight都会随浏
览器窗口的缩放而相应变大变小
2010-12-23日总结出来的一种滚动：
<div style="width: 1714px; height: 110px;">
<div id="demo1" style="width: 857px; height: 106px; float: left;">
<%for (int i = 0; i < dtZhuanJia.Rows.Count; i++)
{ %>
<dl>
<dt><a href="TuanContent.aspx?id=<%=dtZhuanJia.Rows[i]["id"].ToString()%>" class="zi"
target="_blank">
<img width="98px" height="72px" src="<%=dtZhuanJia.Rows[i]["ImagesAddress"] %>" onmouseover="window.clearInterval(scrollInterval);" onmouseout=" scrollInterval = window.setInterval(imgScroll, 40);"/></a></dt>
<dd>
<a href="TuanContent.aspx?id=<%=dtZhuanJia.Rows[i]["id"].ToString()%>" class="zi"
target="_blank">
<%=dtZhuanJia.Rows[i]["Title"]%></a></dd>
</dl>
<%} %>
</div>
<div id="demo2" style="width: 857px; height: 106px; float: left;">
</div>
</div>
</div>
<script type="text/javascript">
function GetWidth(str) {
if (typeof str == "number")
return str;
var index = str.toLowerCase().indexOf("px");
if (index == -1) {
return parseInt(str);
}
return parseInt(str.substr(0, index));
}
function imgScroll() {
if (divNotice.scrollLeft < mWidth) {
divNotice.scrollLeft = GetWidth(divNotice.scrollLeft) + 1;
} else {
divNotice.scrollLeft = 0;
}
}
var ulTop = document.getElementById("demo1");
var ulBot = document.getElementById("demo2");
ulBot.innerHTML = ulTop.innerHTML;
var divNotice = document.getElementById("demo");
var mWidth = ulTop.currentStyle ? ulTop.currentStyle.width : document.defaultView.getComputedStyle(ulTop, null).width;
mWidth = GetWidth(mWidth);
var scrollInterval = window.setInterval(imgScroll, 40);
</script>
