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"> </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);}
留言列表