Div scroll effect, div scroll

Div scroll effect, div scroll

Simply paste the code and copy the code to the file and open it in a browser to see the effect:

The height, width, and quantity of content will affect the result. Please adjust it carefully. <Br>
<! --####################################### # -->
<Br> scroll up:
<Div id = "div_up_1" style = "overflow: hidden; height: 60px; width: 120px;">
<Div id = "div_up_2">
<A href = "#"> contents of the first line </a> <br>
<A href = "#"> contents of the second line </a> <br>
<A href = "#"> contents of the third line </a> <br>
<A href = "#"> contents of Row 4 </a> <br>
<A href = "#"> content on the fifth line </a> <br>
<A href = "#"> contents of Row 6 </a> <br>
<A href = "#"> Row 7 content </a> <br>
<A href = "#"> row 8 </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> scroll down:
<Div id = "div_down_1" style = "overflow: hidden; height: 60px; width: 120px;">
<Div id = "div_down_2">
<A href = "#"> contents of the first line </a> <br>
<A href = "#"> contents of the second line </a> <br>
<A href = "#"> contents of the third line </a> <br>
<A href = "#"> contents of Row 4 </a> <br>
<A href = "#"> content on the fifth line </a> <br>
<A href = "#"> contents of Row 6 </a> <br>
<A href = "#"> Row 7 content </a> <br>
<A href = "#"> row 8 </a> <br>
<A href = "#"> contents of row 9 </a> <br>
<A href = "#"> Row 10 </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> scroll left:
<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> 1 </td>
<Td> 2 </td>
<Td> 3 </td>
<Td> 4 </td>
<Td> 5 </td>
<Td> 6 </td>
<Td> 7 </td>
<Td> 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> scroll to the right:
<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> 1 </td>
<Td> 2 </td>
<Td> 3 </td>
<Td> 4 </td>
<Td> 5 </td>
<Td> 6 </td>
<Td> 7 </td>
<Td> 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>