图片定时向上滚动部分内容20114419 

<!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>图片定时向上滚动</title>
    <style type="text/css">
        body
        {
            font-size: 14px;
        }
        #div
        {
            margin: 0 auto;
            width: 800px;
            border: solid 1px #ccc;
            height: 400px;
            overflow: hidden;
        }
        #div div
        {
            width: 600px;
            height: 400px;
            margin: 0 auto;
            border: 0px;
        }
        #div div img
        {
            border: 0px;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div">
        <div id="div1">
            <img src="images/01.jpg" /><img src="images/02.jpg" /><img src="images/03.jpg" />
        </div>
    </div>
    <div id="mes">
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
function $(str){return document.getElementById(str);}

var div=$("div");
var div1=$("div1");

var content_scrollHeight=parseInt(div.offsetHeight)*(div1.childNodes.length-1);//获得内容的高度(这里用scrollHeight火狐于IE之间有区别所以改用了乘于节点的个数减1,这里的1是DIV1自身）
var content_offsetHeight=div1.offsetHeight;//获得内容可见的高度;
var scroll_y=content_offsetHeight+10;//滚动条的值

var move_time;
var rollback_time;



function divScrollTop()
{
 if(scroll_y<content_scrollHeight)//滚动值小于内容高度时
 {
 for(var move_value=0;move_value<content_offsetHeight;)
 {
  div.scrollTop++;
  move_value++;
 }
// $("mes").innerHTML+="scroll_y"+scroll_y+"content-scrollHeight"+content_scrollHeight;
 scroll_y+=content_offsetHeight;
 }else
 {
  scroll_y=content_offsetHeight+10;//滚动条的值
  for(var i=content_scrollHeight;i>0;i--)
  div.scrollTop=i;
 }
}
setInterval(divScrollTop,3000);
</script>
posted @ 2011-04-19 23:25  solomon_Blog  阅读(435)  评论(0)  编辑  收藏  举报