您的位置: 首页  >  IT文章  >  实现网页文字向上滚动 一、css3操作网页，实现缓缓向上滚动 二、table单行滚动 三、table多行同时向上滚动 四  通过修改top值，实现网页内容向上滚动 五 多行文字向上滚动(有间歇)

实现网页文字向上滚动 一、css3操作网页，实现缓缓向上滚动 二、table单行滚动 三、table多行同时向上滚动 四  通过修改top值，实现网页内容向上滚动 五 多行文字向上滚动(有间歇)

分类: IT文章 • 2023-10-26 13:55:13 


<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>爱情格言</title>  
<style>  
 html, body {
            height: 100%;
            margin: 0;
        }
 body {
        margin: 0;
        background-image: linear-gradient(to bottom, #152129 0%, #2e3d49 50%, #152129 100%);
        background-color: #242b33;
        font: 14px 宋体, "Helvetica Neue", Helvetica, "Hiragino Sans GB", sans-serif;
}
#title{
	top:100px;
	text-align:center; 
	font-size:40px;
	color:#f00;
}

@-webkit-keyframes move  
{  
    0%{  
        top:0; 
    }  
    100%  
    {  
        top:-300px;  
    }     
}  
#wrapper{ 
	height:300px;
	position:relative;
	margin-top:0px;
	margin-left: 50px;
	margin-right: 20px; 
	overflow-x:hidden;
	overflow-y:hidden;
}  
#list{ 
	position:absolute;
	-webkit-animation:5s move infinite linear; 
	100%;
}  
#list li{ 
	list-style:none;
	color:#ff6c00; 
	font:40px Arial;
	text-align:center; 
	float:center;
}  
#wrapper:hover #list{ 
	-webkit-animation-play-state:paused;
} 
</style>  
</head>  
<body>  
<div >
	<h2>爱情格言</h2>
</div>
<div >  
    <ul >  
        <li>永远比一辈子还长，谁能保证这样的誓言不会过期</li>  
        <li>爱上一个人容易，等平淡了后，还坚守那份诺言，就不容易了</li>  
        <li>爱情总藏在温柔的心里</li>  
        <li>爱情是一种永久的信仰</li>  
        <li>离开，也是一种喜欢；遗忘，也是一种幸福；放弃，也是一种爱</li>  
        <li>常相知，才能不相疑；不相疑，才能常相知</li>  
        <li>真正可贵的东西，不可能刻意得到，那需要同样可贵的缘分</li>  
        <li>用一转身离开，用一辈子去忘记</li>  
        <li>在爱的世界里，没有谁对不起谁，只有谁不懂得珍惜谁</li>  
        <li>爱情就是上辈子欠下的情债这辈子来还</li>
		<li>深情是我担不起的重担，情话只是偶然兑现的谎言</li>
		<li>爱使我们有了距离，距离使我们爱得永久</li>
		<li>要善待爱情，因为它不会一辈子跟着你</li>
		<li>真正的爱情不仅要求相爱，而且要求相互洞察对方的内心世界</li>
		<li>爱是磕磕碰碰中的修修补补</li>
		<li>在爱情上，没有相互的忠诚，就没有相互的信任</li>
    </ul>  
</div>  
</body>  
</html>

二、table单行滚动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8">
<HEAD>
<TITLE>滚动表格</TITLE>
<!--css样式是锁定表头不动的-->
<style type="text/css"> 
.table{
          100%;
         left:30%;
         border-collapse:collapse; 
         border-spacing:0;
     }
     .fixedThead{
         display: block;
          100%;
     }
     .scrollTbody{
         display: block;
         height: 316px;
         overflow: hidden;
          100%;
     }
     .table td {
          300px;
         border-bottom: #333 1px dashed;
         padding: 5px;
         background-color:#ddd;
     }
     .table th {
          300px;
         border-bottom: #333 1px dashed;
         border-top: #333 1px dashed;
         padding: 5px;
         line-height:24px;
         background-color:#cfc;
     }
     .table tr{
         border-bottom: #333 1px dashed;
         line-height:24px;
         padding: 5px;
     }
     thead.fixedThead tr th:last-child {
         color:#FF0000;
     }
</style>
<SCRIPT LANGUAGE="JavaScript"> 
//先在table的最后增加一行，然后再把第一行中的数据填充到新增加的行中，最后再删除table的第一行
function change(table){
	var row = table.insertRow(table.rows.length);//在table的最后增加一行,table.rows.length是表格的总行数
	for(j=0;j<table.rows[0].cells.length;j++){//循环第一行的所有单元格的数据，让其加到最后新加的一行数据中（注意下标是从0开始的）
		var cell = row.insertCell(j);//给新插入的行中添加单元格
		cell.height = "24px";//一个单元格的高度，跟css样式中的line-height高度一样
		cell.innerHTML = table.rows[0].cells[j].innerHTML;//设置新单元格的内容，这个根据需要，自己设置
	}
	table.deleteRow(0);//删除table的第一行
};
function tableInterval(){
	var table = document.getElementById("test");//获得表格
	change(table);//执行表格change函数，删除第一行，最后增加一行，类似行滚动
};
setInterval("tableInterval()",2000);//每隔2秒执行一次change函数，相当于table在向上滚动一样
</SCRIPT>
</HEAD>


<BODY align="center">
<H1 style="font-color:blur;">滚动表格</H1>
<table class="table" align="center">
<thead class="fixedThead" align="center">
<tr>
<th>姓名</th><th>性别</th><th>年龄</th>
</tr>
</thead>
<tbody  >
<tr>
<td>1</td><td>男</td><td>18</td>
</tr>
<tr>
<td>2</td><td>男</td><td>20</td>
</tr>
<tr>
<td>3</td><td>女</td><td>19</td>
</tr>
<tr>
<td>4</td><td>女</td><td>21</td>
</tr>
<tr>
<td>5</td><td>男</td><td>18</td>
</tr>
<tr>
<td>6</td><td>男</td><td>20</td>
</tr>
<tr>
<td>7</td><td>女</td><td>19</td>
</tr>
<tr>
<td>8</td><td>女</td><td>21</td>
</tr>
<tr>
<td>9</td><td>男</td><td>18</td>
</tr>
<tr>
<td>10</td><td>男</td><td>20</td>
</tr>
<tr>
<td>11</td><td>女</td><td>19</td>
</tr>
<tr>
<td>12</td><td>女</td><td>21</td>
</tr>
<tr>
<td>13</td><td>男</td><td>18</td>
</tr>
<tr>
<td>14</td><td>男</td><td>20</td>
</tr>
<tr>
<td>15</td><td>女</td><td>19</td>
</tr>
<tr>
<td>16</td><td>女</td><td>21</td>
</tr>
<tr>
<td>17</td><td>男</td><td>18</td>
</tr>
<tr>
<td>18</td><td>男</td><td>20</td>
</tr>

</tbody>
</table>
</BODY>
</HTML>

三、table多行同时向上滚动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8">
<HEAD>
<title>多行同时向上滚动</title>
<!--css样式是锁定表头不动的-->
<style type="text/css"> 
 html, body {
            height: 100%;
            margin: 0;
        }
 body {
        margin: 0;
        background-image: linear-gradient(to bottom, #152129 0%, #2e3d49 50%, #152129 100%);
        background-color: #242b33;
        font: 14px 宋体, "Helvetica Neue", Helvetica, "Hiragino Sans GB", sans-serif;
}
.table{
          100%;
         left:30%;
         border-collapse:collapse; 
         border-spacing:0;
     }
     .fixedThead{
         display: block;
          100%;
     }
     .scrollTbody{
         display: block;
         height: 316px;
         overflow: hidden;
          100%;
     }
     .table td {
          300px;
         border-bottom: #333 1px dashed;
         padding: 5px;
         background-color:#ddd;
     }
     .table th {
          300px;
         border-bottom: #333 1px dashed;
         border-top: #333 1px dashed;
         padding: 5px;
         line-height:24px;
         background-color:#cfc;
     }
     .table tr{
         border-bottom: #333 1px dashed;
         line-height:24px;
         padding: 5px;
     }
     thead.fixedThead tr th:last-child {
         color:#FF0000;
     }
</style>
<SCRIPT LANGUAGE="JavaScript"> 
//先在table的最后增加多行，然后再把前几行中的数据填充到新增加的行中，最后再删除table的前几行
function change(){
	for(var i=0;i<9;i++){
		var table = document.getElementById("test");//获得表格
		var row = table.insertRow(table.rows.length);//在table的最后增加一行,table.rows.length是表格的总行数
		for(j=0;j<table.rows[i].cells.length;j++){//循环第i行的所有单元格的数据，让其加到最后新加的一行数据中（注意下标是从0开始的）
			var cell = row.insertCell(j);//给新插入的行中添加单元格
			cell.height = "20px";//一个单元格的高度，跟css样式中的line-height高度一样
			cell.innerHTML = table.rows[i].cells[j].innerHTML;//设置新单元格的内容，这个根据需要，自己设置
		}
	}
	for(var i=0;i<9;i++){
		var table = document.getElementById("test");//获得表格
		table.deleteRow(0);//删除table的第一行
	}
	
	
};
function tableInterval(){
	
	change();//执行表格change函数，删除前几行，最后增加几行，类似行滚动
};
setInterval("tableInterval()",6000);//每隔6秒执行一次change函数，相当于table在向上滚动一样
</SCRIPT>
</HEAD>


<BODY align="center">
<table class="table" align="center">
<thead class="fixedThead" align="center">
<tr>
<th>姓名</th><th>性别</th><th>年龄</th>
</tr>
</thead>
<tbody  >
<tr>
<td>1</td><td>男</td><td>18</td>
</tr>
<tr>
<td>2</td><td>男</td><td>20</td>
</tr>
<tr>
<td>3</td><td>女</td><td>19</td>
</tr>
<tr>
<td>4</td><td>女</td><td>21</td>
</tr>
<tr>
<td>5</td><td>男</td><td>18</td>
</tr>
<tr>
<td>6</td><td>男</td><td>20</td>
</tr>
<tr>
<td>7</td><td>女</td><td>19</td>
</tr>
<tr>
<td>8</td><td>女</td><td>21</td>
</tr>
<tr>
<td>9</td><td>男</td><td>18</td>
</tr>
<tr>
<td>10</td><td>男</td><td>20</td>
</tr>
<tr>
<td>11</td><td>女</td><td>19</td>
</tr>
<tr>
<td>12</td><td>女</td><td>21</td>
</tr>
<tr>
<td>13</td><td>男</td><td>18</td>
</tr>
<tr>
<td>14</td><td>男</td><td>20</td>
</tr>
<tr>
<td>15</td><td>女</td><td>19</td>
</tr>
<tr>
<td>16</td><td>女</td><td>21</td>
</tr>
<tr>
<td>17</td><td>男</td><td>18</td>
</tr>
<tr>
<td>18</td><td>男</td><td>20</td>
</tr>


</tbody>
</table>
</BODY>
</HTML>


四  通过修改top值，实现网页内容向上滚动


<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>爱情格言</title>  
<style>  
 html, body {
            height: 100%;
            margin: 0;
        }
 body {
        margin: 0;
        background-image: linear-gradient(to bottom, #152129 0%, #2e3d49 50%, #152129 100%);
        background-color: #242b33;
        font: 14px 宋体, "Helvetica Neue", Helvetica, "Hiragino Sans GB", sans-serif;
}
#title{
	top:100px;
	text-align:center; 
	font-size:40px;
	color:#f00;
}

#wrapper{ 
	height:390px;
	position:relative;
	margin-top:0px;
	margin-left: 50px;
	margin-right: 20px; 
	overflow-x:hidden;
	overflow-y:hidden;
}  
#list{ 
	position:absolute;
	100%;
}  
#list li{ 
	list-style:none;
	color:#ff6c00; 
	font:40px Arial;
	text-align:center; 
	float:center;
}  
#contain{
	position:relative;
	top:-390px;
}
</style> 
<SCRIPT LANGUAGE="JavaScript"> 
function change(){
	var contain=document.getElementById("contain");	
	//获取top的值
	var height=contain.offsetTop;
	//设置top的值
	if(height==-390){
		contain.style.top="0px";
	}
	if(height==0){
		contain.style.top="-390px";
	}
};

setInterval("change()",2000);//每隔2秒执行一次change函数，相当于table在向上滚动一样
</SCRIPT>
 
</head>  
<body>  
<div >
	<h2>爱情格言</h2>
</div>
<div >  
	<div >
    <ul >  
        <li>永远比一辈子还长，谁能保证这样的誓言不会过期</li>  
        <li>爱上一个人容易，等平淡了后，还坚守那份诺言，就不容易了</li>  
        <li>爱情总藏在温柔的心里</li>  
        <li>爱情是一种永久的信仰</li>  
        <li>离开，也是一种喜欢；遗忘，也是一种幸福；放弃，也是一种爱</li>  
        <li>常相知，才能不相疑；不相疑，才能常相知</li>  
        <li>真正可贵的东西，不可能刻意得到，那需要同样可贵的缘分</li>  
        <li>用一转身离开，用一辈子去忘记</li>  
        <li>在爱的世界里，没有谁对不起谁，只有谁不懂得珍惜谁</li>  
        <li>爱情就是上辈子欠下的情债这辈子来还</li>
		<li>深情是我担不起的重担，情话只是偶然兑现的谎言</li>
		<li>爱使我们有了距离，距离使我们爱得永久</li>
		<li>要善待爱情，因为它不会一辈子跟着你</li>
		<li>真正的爱情不仅要求相爱，而且要求相互洞察对方的内心世界</li>
		<li>爱是磕磕碰碰中的修修补补</li>
		<li>在爱情上，没有相互的忠诚，就没有相互的信任</li>
    </ul> 
</div>	
</div>  
</body>  
</html>

五 多行文字向上滚动(有间歇)


<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> 
<style type="text/css"> 
.scrollDiv{height:100px;line-height:25px;overflow:hidden;} 
.scrollDiv li{height:25px;padding-left:10px;} 
ul,li{list-style-type:none;margin:0px;}</style> 

<h2>多行文字向上滚动(有间歇)</h2> 
<div > 
<ul> 
		<li>1</li>  
        <li>2</li>  
        <li>3</li> 
		<li>4</li>  
        <li>5</li>  
        <li>6</li>
		<li>7</li>  
        <li>8</li>  
        <li>9</li>
		<li>10</li>  
        <li>11</li>  
        <li>12</li>		
        
</ul> 
</div> 
<script type="text/javascript"> 
function AutoScroll(obj){ 
$(obj).find("ul:first").animate({ 
marginTop:"-100px" 
},500,function(){ 
for(var i=0;i<4;i++){
	$(this).css({marginTop:"0px"}).find("li:eq("+0+")").appendTo(this); 
}

}); 
} 
$(document).ready(function(){ 
setInterval('AutoScroll("#scrollDiv_keleyi_com")',3000); 
}); 
</script>

相关推荐