<head>
<title>逐行文本滚动效果</title>
<style type="text/css">
body,div,ul,li{margin:0padding:0}
ul,li{list-style:none}
body{font-size:12pxcolor:#000000}
.con{width:300pxheight:30pxborder:1px solid #333333overflow:hiddenmargin:100px auto 0}
.list{width:100%}
.list li{width:100%height:30pxline-height:30pxtext-indent:20pxfloat:left}
</style>
<script language="javascript">
function scrollTitle(changeSpeed,scrollSpeed,oid){
var con = document.getElementById("list_con"+oid)
var list = document.getElementById("news_list"+oid)
list.innerHTML += list.innerHTML
var items = list.getElementsByTagName("li")
var timer_1 = setInterval(_scrollTitle,changeSpeed)
var heightAll =0
for(var i=0i<items.lengthi++){
heightAll += items[i].offsetHeight
}
var heightHalf = parseInt(heightAll/2)
con.onmouseover = function(){
if(timer_1){
clearInterval(timer_1)
timer_1=null
}
}
con.onmouseout = function(){
if(timer_1){
clearInterval(timer_1)
timer_1=null
}
timer_1 = setInterval(_scrollTitle,changeSpeed)
}
function _scrollTitle(){
var timer
var num = 30
timer = setInterval(scrollTop,scrollSpeed)
function scrollTop(){
if(con.scrollTop<heightHalf){
con.scrollTop += 3
num -= 3
}else{
con.scrollTop = 0
}
if(num <= 0){
clearInterval(timer)
}
}
}
}
</script>
</head>
<body>
<div class="con" id="list_con0">
<ul class="list" id="news_list0">
<li><a href="#" target="_blank">多种基于jQuery的鼠标动画效果演示代码</a></li>
<li><a href="#" target="_blank">横向、纵向的四级展开菜单，含示例文件</a></li>
<li><a href="#" target="_blank">JavaScript妙味课堂：apple最新产品展示效果</a></li>
</ul>
</div>
<script language="javascript">scrollTitle(3000,50,0)</script>
<div class="con" id="list_con1">
<ul class="list" id="news_list1">
<li><a href="#" target="_blank">多种基于jQuery的鼠标动画效果演示代码</a></li>
<li><a href="#" target="_blank">横向、纵向的四级展开菜单，含示例文件</a></li>
<li><a href="#" target="_blank">JavaScript妙味课堂：apple最新产品展示效果</a></li>
</ul>
</div>
<script language="javascript">scrollTitle(3000,50,1)</script>
<div class="con" id="list_con2">
<ul class="list" id="news_list2">
<li><a href="#" target="_blank">多种基于jQuery的鼠标动画效果演示代码</a></li>
<li><a href="#" target="_blank">横向、纵向的四级展开菜单，含示例文件</a></li>
<li><a href="#" target="_blank">JavaScript妙味课堂：apple最新产品展示效果</a></li>
</ul>
</div>
<script language="javascript">scrollTitle(3000,50,2)</script>
<div class="con" id="list_con3">
<ul class="list" id="news_list3">
<li><a href="#" target="_blank">多种基于jQuery的鼠标动画效果演示代码</a></li>
<li><a href="#" target="_blank">横向、纵向的四级展开菜单，含示例文件</a></li>
<li><a href="#" target="_blank">JavaScript妙味课堂：apple最新产品展示效果</a></li>
</ul>
</div>
<script language="javascript">scrollTitle(3000,50,3)</script>
</body>
</html>
首先指出你的问题：1、你的事件邦定在指定的节点了。
var con = document.getElementById("list_con")
var list = document.getElementById("news_list")
2、一个页面不可以有多个相同的ID名。而你写了好多个！
多个相同ID时只有第一个可以用。所以下面的那些不可用。
如下代码可重用：
<script language="javascript">
function scrollTitle(){
this.scroll =function($val){
this.action($val)
}
this.action =function($val){
alert($val)
}
}
test1 = new scrollTitle()
test1.scroll('逐行文本滚动效果1')
test1.scroll('逐行文本滚动效果2')
test1.scroll('逐行文本滚动效果3')
</script>
<script type="text/javascript">window.onload = function(){
var aDiv = document.getElementById('nav')
var aUl = aDiv.getElementsByTagName('ul')[0]
var aLi = aUl.getElementsByTagName('li')
for(var i=0,len=aLi.lengthi<leni++) {
aLi[i].onmouseover = function(){
//alert('aa')
this.style.background = 'red'
}
aLi[i].onmouseout = function(){
//alert('aa')
this.style.background = 'white'
}
}
}
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">妙味世界</a>
<ul class="shit">
<li><a href="#">案例一</a></li>
<li><a href="#">案例二</a></li>
<li><a href="#">案例三</a></li>
<li><a href="#">案例四</a></li>
</ul>
</li>
<li><a href="#">妙味课堂</a>
<ul class="shit">
<li><a href="#">案例一</a></li>
<li><a href="#">案例二</a></li>
<li><a href="#">案例三</a></li>
<li><a href="#">案例四</a></li>
</ul>
</li>
<li><a href="#">妙味书馆</a></li>
<li><a href="#">妙味茶馆</a></li>
<li><a href="#">妙味视频</a></li>
<li><a href="#">妙味人生</a></li>
</ul>
</div>
</body>
</html>
