javaScript滚动新闻

最新推荐文章于 2023-03-28 11:22:56 发布

黑暗浪子

最新推荐文章于 2023-03-28 11:22:56 发布

阅读量928

点赞数

分类专栏： javaScript+html5+CSS学习文章标签： javaScript DOM案例滚动新闻

本文链接：https://blog.csdn.net/u012453619/article/details/38270077

版权

javaScript+html5+CSS学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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>