图片定时向上滚动部分内容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>

转载于:https://www.cnblogs.com/solomon_Blog/archive/2011/04/19/2021670.html