求高手修改个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=gb2312" />
<title>hi,csdn</title>
<style type="text/css">
#block {
  margin:0px;padding:5px;width:150px;height:100px;border:1px #cccccc solid;font-size:12px;
}
#block span.hid {
  float:right;width:100px;background:#f2f2f2;white-space:nowrap;overflow:hidden
}
</style>
</head><body><div id="block">
<span id="text1" onmouseover="scrollit1();" onmouseout="stopit1();" class="hid">
这里面是显示的东西，可能会很长</span>标题：</div>
<script language="javascript">
var temp1=document.getElementById("text1").innerHTML;
var text1=temp1;
var Hml1 = document.getElementById("text1").innerHTML;
var delay1=300;
var x1; 
function scrollit1(){
if(temp1.length>6){
temp1=temp1+" "+text1;
temp1=temp1.slice(1)  
document.getElementById("text1").innerHTML=temp1.slice(0,text1.length) 
 x1 = setTimeout("scrollit1()",delay1) 
 }else{
  return false;
 }
} 
function  stopit1() 
{ 
clearTimeout(x1) 
document.getElementById("text1").innerHTML = Hml1;
}
</script></body></html>--------------------------------------------------------------
说明：上面是一个字体超过宽度滚动的效果，这个效果现在我是修改好了，但是，我如何把那个js代码做成一个js函数性质的，因为我一个网页里可能含有很多那样的<span>，比如<span id="text1"..>...</span><span id="text2"..>...</span>...可能很多个，请问如何把那个js代码改成一个函数，这样的话，span里只要这样onmouseover="scrollit(1);" onmouseout="stopit(1);"，然后其他的相应的 onmouseover="scrollit(数字);" onmouseout="stopit(数字);"，这样就可以了，不然按现在的话每个都需要再重新定义一遍，如果有很多的话那就更麻烦了。
---------------------------------------------------------------
哪位可以给修改下，或还有其他更好的办法的能赐教下，谢谢各位了

解决方案 »

  1.   

    LZ,带参数的函数会使用么?    把函数写成带参数的 function abc(obj){ //此处为实现代码},然后在对象<span id="text1" nmouseover="scrollit1(this);" onmouseout="stopit1(this);" class="hid">,函数体里的代码和你现在的一样.
      

  2.   

    <!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=gb2312" />
    <title>hi,csdn</title>
    <style type="text/css">
    #block {
      margin:0px;padding:5px;width:150px;height:100px;border:1px #cccccc solid;font-size:12px;
    }
    #block span.hid {
      float:right;width:100px;background:#f2f2f2;white-space:nowrap;overflow:hidden
    }
    </style>
    </head><body><div id="block">
        <span id="text1" class="hid">
        134513451345135431513453415341534511</span>标题1：
        <span id="text2" class="hid">
        fdwerwearwaerwearawerfeawfafafaewfawewr</span>标题2：
        <span id="text3" class="hid">
        3333333333355555555333333333333333333</span>标题3：</div>
    <script language="javascript">
    function abc(obj){
    obj.temp1=obj.innerHTML;
    obj.text1=obj.temp1;
    obj.Hml1 = obj.innerHTML;
    obj.delay1=300;
    obj.x1; 
    obj.onmouseover = function(){
      if(this.temp1.length>6){
        this.temp1=this.temp1+" "+this.text1;
        this.temp1=this.temp1.slice(1);  
        this.innerHTML=this.temp1.slice(0,this.text1.length) 
        this.x1 = setTimeout("document.getElementById('"+this.id+"').onmouseover()",this.delay1) 
       }else{
           return false;
       }
    } 
    obj.onmouseout = function () 
    { 
      clearTimeout(this.x1) 
      this.innerHTML = this.Hml1;
    }
    }
    var a = document.getElementById("text1");
    var b = document.getElementById("text2");
    var c = document.getElementById("text3");
    abc(a);
    abc(b);
    abc(c);
    </script></body></html>
      

  3.   

    <!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=gb2312" />
    <title>hi,csdn</title>
    <style type="text/css">
    #block {
      margin:0px;padding:5px;width:150px;height:100px;border:1px #cccccc solid;font-size:12px;
    }
    #block span.hid {
      float:right;width:100px;background:#f2f2f2;white-space:nowrap;overflow:hidden
    }
    </style>
    </head><body><div id="block">
        <span id="text1" onmouseover="scrollit1(this);" onmouseout="stopit1(this);" class="hid">
        这里面是显示的东西，可能会很长</span>标题：
        <span id="text1" onmouseover="scrollit1(this);" onmouseout="stopit1(this);" class="hid">
        这里面是显示的东西，可能会很长</span>标题：
            <span id="text1" onmouseover="scrollit1(this);" onmouseout="stopit1(this);" class="hid">
        这里面是显示的东西，可能会很长</span>标题：
            <span id="text1" onmouseover="scrollit1(this);" onmouseout="stopit1(this);" class="hid">
        这里面是显示的东西，可能会很长</span>标题：    
    </div>
    <script language="javascript">
    var temp1,text1;
    var delay1=300;
    var x1; function scrollit1(obj){
    if(!arguments[1]){temp1=text1=obj.innerHTML};
    var self =obj
    if(temp1.length>6){
    temp1=temp1+" "+text1;
    temp1=temp1.slice(1)  
    obj.innerHTML=temp1.slice(0,text1.length) 
     x1 = setTimeout(function(){scrollit1(self,1)},delay1) 
     }
    } 
    function  stopit1(obj) 
    { 
    clearTimeout(x1) 
    obj.innerHTML = text1;
    }
    </script></body></html>
      

  4.   


    <!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=gb2312" />
    <title>hi,csdn</title>
    <style type="text/css">
    .block {
      margin:0px;padding:5px;width:150px;height:100px;border:1px #cccccc solid;font-size:12px;
    }
    .block span.hid {
      float:right;width:100px;background:#f2f2f2;white-space:nowrap;overflow:hidden
    }
    </style>
    </head><body><div id="block1" class="block">
        <span id="text1"class="hid">
        这里面是显示的东西，可能会很长</span>标题：
        <span id="text11"class="hid">
        这里面是显示的东西，可能会很长</span>标题：
    </div>
        
    <div id="block2" class="block">
        <span id="text2"class="hid">
        这里面是显示的东西，可能会很长</span>标题：
        <span id="text22"class="hid">
        这里面是显示的东西，可能会很长</span>标题：
    </div>
        
    <div id="block3" class="block">
        <span id="text3"class="hid">
        这里面是显示的东西，可能会很长</span>标题：
        <span id="text32"class="hid">
        这里面是显示的东西，可能会很长</span>标题：
    </div><script language="javascript">
    var delay1=300;
    var timer; function scrollTxt(str,obj,inner){
    var tmp=str.charAt(0)
    str=str.slice(1)+tmp 
    obj.innerHTML=str.slice(0,inner.length) 
     timer = setTimeout(function(){scrollTxt(str,obj,inner)},delay1) }function scrollit(_this){
    clearTimeout(timer)
    if(_this.innerHTML.length>6){
    _this.caiying2009=_this.innerHTML
    var str=_this.innerHTML+"   "+_this.innerHTML+"   "
    scrollTxt(str,_this,_this.innerHTML)
    }
    }function stopit(_this){
    clearTimeout(timer)
    if (_this.caiying2009) 
    _this.innerHTML=_this.caiying2009
    }onload=function (){
    var obj=document.getElementsByTagName("span")
    for (var i=0;i<obj.length;i++){
    if (obj[i].className=="hid"){
    obj[i].onmouseover=function(){scrollit(this)}
    obj[i].onmouseout=function(){stopit(this)}
    }
    }
    }
    </script></body></html>