<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>滚动新闻</title>
</head>
<style type="text/css">
#div1{
width:200px;
height:80px;
background-color:#CCC;
position:absolute;
left:0px;
top:0px;
z-index:1;
overflow:hidden;
}
#imgs{
width:100px;
height:400px;
background-color:#9C9;
position:absolute;
left:200px;
top:0px;
z-index:1; //垂直方向置于最顶层
overflow:hidden; //超出部分隐藏
}
</style>
<body>
<!--div 的高度设置比实际需要的高度小-->
<div id="div1">
<ul id="news">
<li><a href="#">aaaaaaaaaaaaaaa</a></li>
<li><a href="#">bbbbbbbbbbbbbbb</a></li>
<li><a href="#">ccccccccccccccc</a></li>
<li><a href="#">ddddddddddddddd</a></li>
<li><a href="#">eeeeeeeeeeeeeee</a></li>
<li><a href="#">fffffffffffffff</a></li>
<li><a href="#">ggggggggggggggg</a></li>
</ul>
</div>
<div id="imgs">
<img src="imgs/11.png"></img>
<img src="imgs/22.png"></img>
<img src="imgs/33.png"></img>
<img src="imgs/44.png"></img>
<img src="imgs/55.png"></img>
</div>
</body>
</html>
<script type="text/javascript" language="javascript">
//注意需要让当前的dom加载完全之后，再执行js代码
//文字滚动
news = document.getElementById('news');
function newScroll(node){
var t = node.firstChild;
node.removeChild(t);
node.appendChild(t);
}
id = setInterval('newScroll(news)',400);
news.onmouseover = function(){
clearTimeout(id);
}
news.onmouseout = function(){
id = window.setInterval('newScroll(news)',400);
}
//图片滚动
imgs = document.getElementById('imgs');
id1 = setInterval('newScroll(imgs)',400);
imgs.onmouseover = function(){
clearTimeout(id1);
}
imgs.onmouseout = function(){
id1 = window.setInterval('newScroll(imgs)',400);
}
</script>
javaScript滚动新闻,布布扣,bubuko.com
javaScript滚动新闻