用Javascript代替Marquee标签

 

1.XHTML 代码：

 1 < div  id ="demo" >
 2  < div  id ="indemo" >
 3   < div  id ="demo1" >
 4     < div >
 5      < a  href ="#"  title ="" >< img  src ="#"  alt ="" /></ a >
 6      < a  href ="#"  title ="" >< img  src ="#"  alt ="" /></ a >
 7      < a  href ="#"  title ="" >< img  src ="#"  alt ="" /></ a >
 8      < a  href ="#"  title ="" >< img  src ="#"  alt ="" /></ a >
 9    </ div >
10   </ div >
11  < div  id ="demo2" ></ div >
12  </ div >

13 </div> 

 

2.JavaScript代码：

 

< script  type ="text/javascript" >
<!--
var  speed = 8 ;  // 数字越大速度越慢
var  tab = document.getElementById( " demo " );
var  tab1 = document.getElementById( " demo1 " );
var  tab2 = document.getElementById( " demo2 " );
tab2.innerHTML = tab1.innerHTML;
                            
function  Marquee(){
  if (tab2.offsetWidth - tab.scrollLeft <= 0 )
    tab.scrollLeft -= tab1.offsetWidth
  else
 {
    tab.scrollLeft ++ ;
 }
}

var  MyMar = setInterval(Marquee,speed);
tab.onmouseover = function () {clearInterval(MyMar)};
ab.onmouseout = function () {MyMar = setInterval(Marquee,speed)};
// -->

</script> 

 

注: tab.scrollLeft 向左滚动；  tab.scrollTop 向上滚动；  tab.scrollRight 向右滚动；  tab.scrollDown 向下滚动。

 

3.CSS

 

  #demo {  overflow:hidden; width: 820px; margin-left:8px; }

    #demo a  img  {  border :  3px double #F2F2F2 ;    }
    #indemo  {  float :  left ;   width :  800% ;  height : 100px ;   }
    #demo1  {   float :  left ;   }
    #demo2  {   float :  left ;   }

 

转载于:https://www.cnblogs.com/cancer_xu/archive/2009/11/19/1605969.html