css部份
====================
  #message1 {height: 190px; width: 100%; overflow: hidden; float: left; display: inline; margin-bottom: 6px; font-size: 12px;}
  #message1 li{margin: 0px; background: #ffffff url(arrow_l2_over.gif) no-repeat 0 50%; display: block;margin-bottom: 8px;}
  #message1 li a{text-decoration: none; color: blue;}
  #message1 li a:hover{border-bottom: 2px solid green; background-color: yellow;}


html部份
====================
  <div id="message1">
    <div id="message2">
      <ul>
<li>2007/03/15 </li>
<li>2007/03/15 </li>
<li>2007/03/13 </li>
<li>2007/03/08 </li>
<li>2007/03/06 </li>
<li>2007/03/01 </li>
<li>2007/03/01 </li>
<li>2007/02/27 </li>
<li>2007/02/12 </li>
<li>2007/02/05 </li>
<li>2007/02/01 </li>
<li>2007/02/01 </li>
<li>2007/01/30 </li>
<li>2007/01/30 </li>
        </ul>
      </div>
      <div id="message3">&nbsp;</div>
    </div>
    <script type="text/javascript" src="message.js"></script>

javascript部份
====================
var speed=150;
var m1=document.getElementById('message1');
var m2=document.getElementById('message2');
var m3=document.getElementById('message3');
m3.innerHTML=m2.innerHTML;
function mymarquee(){
  if(m3.offsetHeight-m1.scrollTop <= 0){
    m1.scrollTop -= m2.offsetHeight;
  }else{
    m1.scrollTop++;
  }
}
var MyMar1=setInterval(mymarquee,speed);
m1.onmouseover=function(){clearInterval(MyMar1);}
m1.onmouseout=function(){MyMar1=setInterval(mymarquee,speed);}

jck11 發表在 痞客邦 PIXNET 留言(0) 人氣()