代码非常简单的滚动效果(符合web标准)

时间:2007-03-18 08:45:05   来源:  作者:  点击:次  出处:技术无忧
关键字:滚动 web标准 代码

原来滚动可以这么简单

例一:

<ul id="contain"><li>list 1</i><li>list 2</i><li>list 3</i><li>list 4</i></ul>
<SCRIPT LANGUAGE="JavaScript">
function xx(){
var container=document.getElementById("contain");
container.appendChild(container.firstChild);
}
setInterval("xx()",100);
</SCRIPT>

完全是标准写法
例二:
<!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>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
#container{width:300px; height:100px; margin:0px; overflow:hidden; font-size:12px}
#container div{height:20px}
</style>
<script type="text/javascript">
var tt;
function scroll(){
 var h = parseInt(container.firstChild.style.marginTop) * -1;
 if(isNaN(h)) h = 0;
 if(h==0){
  var clonenode = container.firstChild.cloneNode(true);
  container.appendChild(clonenode);
  container.firstChild.style.marginTop = "-1px";
  tt=setInterval("scroll()",100);
 }else if(h>0 && h < container.firstChild.offsetHeight){
  container.firstChild.style.marginTop = (h + 1)* -1 + "px";
    }else{
  container.removeChild(container.firstChild);
  clearInterval(tt);
  scroll();
 }
 
}

</script>
</head>

<body>
<div id="container" onmouseover="clearInterval(tt)" onmouseout="tt=setInterval('scroll()',100);"><div>第一个</div><div>第二个</div><div>第三个</div><div>第四个</div><div>第五个</div></div>
<input type="button" name="bt" value="滚动" onclick="scroll();">
<input type="text" name="view">
</body>
</html>

拥有帝国一切,皆有可能。欢迎访问phome.net

相关文章

文章评论

共有 0 位网友发表了评论 此处只显示部分留言 点击查看完整评论页面

特别推荐