div滚动效果

废话不多说，直接贴代码，将代码复制到文件中直接用浏览器打开即可看到效果：

高度或宽度，以及内容数量都会对结果产生影响，请仔细调整。<br>
<!-- ######################################### -->
<br>向上滚动效果:
<div id="div_up_1" style="overflow:hidden; height:60px; width:120px;"> 
<div id="div_up_2">  
<a href="#">第一行内容</a><br> 
<a href="#">第二行内容</a><br> 
<a href="#">第三行内容</a><br> 
<a href="#">第四行内容</a><br> 
<a href="#">第五行内容</a><br> 
<a href="#">第六行内容</a><br> 
<a href="#">第七行内容</a><br> 
<a href="#">第八行内容</a><br>
</div> 
<div id="div_up_3"></div> 
</div>


<script language="JavaScript" type="text/javascript"> 
function $(str)
{
return document.getElementById(str);
}
$("div_up_3").innerHTML = $("div_up_2").innerHTML;
function MarQueeUp()
{ 
if($("div_up_3").offsetTop - $("div_up_1").scrollTop <= 0)
{
$("div_up_1").scrollTop -= $("div_up_2").offsetHeight;
} 
else
{ 
$("div_up_1").scrollTop ++;
} 
}
var speed_up = 50;
var MyMarUp = setInterval(MarQueeUp, speed_up);
$("div_up_1").onmouseover = function()
{
clearInterval(MyMarUp);
} 
$("div_up_1").onmouseout = function()
{
MyMarUp = setInterval(MarQueeUp, speed_up);
} 
</script> 


<!-- ######################################### -->
<br>向下滚动效果:
<div id="div_down_1" style="overflow:hidden; height:60px; width:120px;"> 
<div id="div_down_2">  
<a href="#">第一行内容</a><br> 
<a href="#">第二行内容</a><br> 
<a href="#">第三行内容</a><br> 
<a href="#">第四行内容</a><br> 
<a href="#">第五行内容</a><br> 
<a href="#">第六行内容</a><br> 
<a href="#">第七行内容</a><br> 
<a href="#">第八行内容</a><br>
<a href="#">第九行内容</a><br>
<a href="#">第十行内容</a><br>
</div> 
<div id="div_down_3"></div> 
</div>


<script language="JavaScript" type="text/javascript"> 
function $(str)
{
return document.getElementById(str);
}
$("div_down_3").innerHTML = $("div_down_2").innerHTML;


function MarQueeDown()
{ 
if($("div_down_2").offsetTop - $("div_down_1").scrollTop >= 0)
{
$("div_down_1").scrollTop += $("div_down_3").offsetHeight;
} 
else
{ 
$("div_down_1").scrollTop --;
} 
}
var speed_down = 50;
var MyMarDown = setInterval(MarQueeDown, speed_down);
$("div_down_1").onmouseover = function()
{
clearInterval(MyMarDown);
} 
$("div_down_1").onmouseout = function()
{
MyMarDown = setInterval(MarQueeDown, speed_down);
} 
</script> 


<!-- ######################################### -->
<br>向左滚动效果:
<div id="div_left_1" style="overflow:hidden; width:200px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="div_left_2" valign="top">
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td><img src="1.jpg" />1</td>
<td><img src="2.jpg" />2</td>
<td><img src="3.jpg" />3</td>
<td><img src="4.jpg" />4</td>
<td><img src="5.jpg" />5</td>
<td><img src="6.jpg" />6</td>
<td><img src="7.jpg" />7</td>
<td><img src="8.jpg" />8</td>
</tr>
</table>
</td>
<td id="div_left_3" valign="top">
</td>
</tr>
</table>
</div>


<SCRIPT language="JavaScript" type="text/javascript">
function $(str)
{
return document.getElementById(str);
}
$("div_left_3").innerHTML = $("div_left_2").innerHTML;
function MarQueeLeft()
{
if($("div_left_3").offsetWidth - $("div_left_1").scrollLeft <= 0)
{
$("div_left_1").scrollLeft -= $("div_left_2").offsetWidth;
}
else
{
$("div_left_1").scrollLeft ++;
}
}
var speed_left = 30;
var MyMarLeft = setInterval(MarQueeLeft, speed_left);
$("div_left_1").onmouseover = function()
{
clearInterval(MyMarLeft);
}
$("div_left_1").onmouseout = function()
{
MyMarLeft = setInterval(MarQueeLeft, speed_left);
}
</SCRIPT>




<!-- ######################################### -->
<br>向右滚动效果:
<div id="div_right_1" style="overflow:hidden; width:200px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="div_right_2" valign="top">
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td><img src="1.jpg" />1</td>
<td><img src="2.jpg" />2</td>
<td><img src="3.jpg" />3</td>
<td><img src="4.jpg" />4</td>
<td><img src="5.jpg" />5</td>
<td><img src="6.jpg" />6</td>
<td><img src="7.jpg" />7</td>
<td><img src="8.jpg" />8</td>
</tr>
</table>
</td>
<td id="div_right_3" valign="top">
</td>
</tr>
</table>
</div>


<script language="JavaScript" type="text/javascript"> 
function $(str)
{
return document.getElementById(str);
}
$("div_right_3").innerHTML = $("div_right_2").innerHTML;
function MarQueeRight()
{ 
if($("div_right_1").scrollLeft <= 0)
{
$("div_right_1").scrollLeft += $("div_right_3").offsetWidth;
}
else
{ 
$("div_right_1").scrollLeft --;
} 
}
var speed_right = 30;
var MyMarRight = setInterval(MarQueeRight, speed_right); 
$("div_right_1").onmouseover = function()
{
clearInterval(MyMarRight);
} 
$("div_right_1").onmouseout = function()
{
MyMarRight = setInterval(MarQueeRight, speed_right);
} 
</script>