蜗牛—JavaScript学习之scroll

最新推荐文章于 2022-11-09 15:48:32 发布

树上的大腰子

最新推荐文章于 2022-11-09 15:48:32 发布

阅读量645

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq1791422018/article/details/25987067

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近，在学习JS，我了个去，写多了后台，JS一点也不想写，看着是很简单，写起来有点吃力啊。

下面这是字幕自动滚动的效果代码。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
ul,li{
	list-style:none;
	padding:0px;
	margin:0px;
	font-size:12px;
	}

#container1{
	overflow:hidden;	
	height:250px;		
	width:300px;
	padding:5px;
}	
</style>
<script>
var handler;
var obj1;
var obj2;
var obj3;
function moveTop(){
	if(obj3.offsetTop-obj1.scrollTop<=0){
		obj1.scrollTop-=obj2.scrollHeight;
	}else{
		obj1.scrollTop++;
	}
}

window.οnlοad=function(){
	obj1=document.getElementById("container1");
	obj2=document.getElementById("container2");
	obj3=document.getElementById("container3");
	obj3.innerHTML=obj2.innerHTML;
	handler=window.setInterval("moveTop()",50);
	document.getElementById("container1").οnmοuseοver=function(){
		window.clearInterval(handler);	
	};
	document.getElementById("container1").οnmοuseοut=function(){
		handler=window.setInterval("moveTop()",50);
	}
}
</script>
</head>

<body>

<div id="container1">
	<div id="container2">
        <ul id="express">
          <li>·2010考研英语大纲到货75折...</li>
            <li>·权威定本四大名著（人民文...</li>
            <li>·口述历史权威唐德刚先生国...</li>
            <li>·袁伟民与体坛风云：实话实...</li>
            <li>·我们台湾这些年：轰动两岸...</li>
            <li>·畅销教辅推荐：精品套书50...</li>
            <li>·2010版法律硕士联考大纲75...</li>
            <li>·计算机新书畅销书75折抢购</li>
            <li>·2009年孩子最喜欢的书>></li>
            <li>·弗洛伊德作品精选集59折</li>
            
            <li>·2010考研英语大纲到货75折...</li>
            <li>·权威定本四大名著（人民文...</li>
            <li>·口述历史权威唐德刚先生国...</li>
            <li>·袁伟民与体坛风云：实话实...</li>
            <li>·我们台湾这些年：轰动两岸...</li>
            <li>·畅销教辅推荐：精品套书50...</li>
            <li>·2010版法律硕士联考大纲75...</li>
            <li>·计算机新书畅销书75折抢购</li>
            <li>·2009年孩子最喜欢的书>></li>
            <li>·弗洛伊德作品精选集59折</li>
        </ul>
    </div>
    <div id="container3"></div>
</div>

</body>
</html>