最近,在学习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>