怎么做Div滚动
日期：2014-05-17 浏览次数：20967 次
如何做Div滚动。
如何做滚动DIV
<html>
<head> <title> 滚动DIV </title>
</head>
<body >
<div id= "div1 " style= "position:absolute;width:300px;height:200px;border:solid 1px #336600 ">
<div id= "div2 " style= "position:absolute;border:solid 1px #336600;top:0px;left:10px; ">
<p> 这是内容1啊 </p>
<p> 这是内容2啊 </p>
<p> 这是内容3啊 </p>
<p> 这是内容4啊 </p>
</div>
</div>
</body>
</html>
<script language= "javascript ">
var obj=document.getElementById( "div2 ");
function scrollUp()
{
obj.style.top=(parseInt(obj.style.top)+10)+ "px ";
}
setInterval(scrollUp,500); //滚动一秒向上滚动一次
</script>
自己写个有点不符合要求啊。我希望div2滚动到div1外面时：在里面的部分显示，在外面的部分就不显示了。
可这段代码做不到这种效果。
请人指点了。如何让div2超出部分不显示，不超出部分显示。
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 ">
<title> </title>
</head>
<body>
<div style= "width:170px;height:70px;overflow:hidden; " id= "scro-content ">
<div style= "width:170px;height:70px;overflow:hidden; " id= "scro-main ">
<table width= "175 " height= "70 " border= "0 " cellspacing= "0 " cellpadding= "0 ">
<tr>
<td id= "rool01 "> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </td>
<td id= "rool02 "> </td>
</tr>
</table>
</div> </div>
</body>
</html>
<script type= "text/javascript ">
function $(obj){return document.getElementById(obj);}
var speed=38;
$( 'rool02 ').innerHTML=$( 'rool01 ').innerHTML;
var rool_num=0;
function scro(){
if(rool_num> =$( 'rool01 ').offsetWidth)rool_num=0;
rool_num++;
$( 'scro-main ').scrollLeft=rool_num;
}
var timeout=setInterval( 'scro() ',speed);
$( 'scro-content ').onmouseover=function() {clearInterval(timeout)}
$( 'scro-content ').onmouseout=function() {timeout=setInterval( 'scro() ',speed)}
</script>
如何做滚动DIV
<html>
<head> <title> 滚动DIV </title>
</head>
<body >
<div id= "div1 " style= "position:absolute;width:300px;height:200px;border:solid 1px #336600 ">
<div id= "div2 " style= "position:absolute;border:solid 1px #336600;top:0px;left:10px; ">
<p> 这是内容1啊 </p>
<p> 这是内容2啊 </p>
<p> 这是内容3啊 </p>
<p> 这是内容4啊 </p>
</div>
</div>
</body>
</html>
<script language= "javascript ">
var obj=document.getElementById( "div2 ");
function scrollUp()
{
obj.style.top=(parseInt(obj.style.top)+10)+ "px ";
}
setInterval(scrollUp,500); //滚动一秒向上滚动一次
</script>
自己写个有点不符合要求啊。我希望div2滚动到div1外面时：在里面的部分显示，在外面的部分就不显示了。
可这段代码做不到这种效果。
请人指点了。如何让div2超出部分不显示，不超出部分显示。
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 ">
<title> </title>
</head>
<body>
<div style= "width:170px;height:70px;overflow:hidden; " id= "scro-content ">
<div style= "width:170px;height:70px;overflow:hidden; " id= "scro-main ">
<table width= "175 " height= "70 " border= "0 " cellspacing= "0 " cellpadding= "0 ">
<tr>
<td id= "rool01 "> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </td>
<td id= "rool02 "> </td>
</tr>
</table>
</div> </div>
</body>
</html>
<script type= "text/javascript ">
function $(obj){return document.getElementById(obj);}
var speed=38;
$( 'rool02 ').innerHTML=$( 'rool01 ').innerHTML;
var rool_num=0;
function scro(){
if(rool_num> =$( 'rool01 ').offsetWidth)rool_num=0;
rool_num++;
$( 'scro-main ').scrollLeft=rool_num;
}
var timeout=setInterval( 'scro() ',speed);
$( 'scro-content ').onmouseover=function() {clearInterval(timeout)}
$( 'scro-content ').onmouseout=function() {timeout=setInterval( 'scro() ',speed)}
</script>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
