实现网页文字向上滚动
2017-04-09 13:48
567 查看
一、css3操作网页，实现缓缓向上滚动
<!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;
width: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 id="title">
<h2>爱情格言</h2>
</div>
<div id="wrapper">
<ul id="list">
<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{
width: 100%;
left:30%;
border-collapse:collapse;
border-spacing:0;
}
.fixedThead{
display: block;
width: 100%;
4000
}
.scrollTbody{
display: block;
height: 316px;
overflow: hidden;
width: 100%;
}
.table td {
width: 300px;
border-bottom: #333 1px dashed;
padding: 5px;
background-color:#ddd;
}
.table th {
width: 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 id="test" class="scrollTbody" align="center">
<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{
width: 100%;
left:30%;
border-collapse:collapse;
border-spacing:0;
}
.fixedThead{
display: block;
width: 100%;
}
.scrollTbody{
display: block;
height: 316px;
overflow: hidden;
width: 100%;
}
.table td {
width: 300px;
border-bottom: #333 1px dashed;
padding: 5px;
background-color:#ddd;
}
.table th {
width: 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 id="test" class="scrollTbody" align="center">
<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;
width: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 id="title">
<h2>爱情格言</h2>
</div>
<div id="wrapper">
<div id="contain">
<ul id="list">
<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 id="scrollDiv_keleyi_com" class="scrollDiv">
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js实现文字定时向上滚动效果_文字特效_js网页特效代码
- 网页中实现文字或图片向上不间断滚动的javascript代码
- Jquery结合div+css实现文字间断停顿向上滚动效果
- jquery 实现无间图片文字向上滚动效果
- js实现文字无缝向上滚动
- JS实现文字向上无缝滚动轮播
- Android自定义控件实现多行文字自动向上滚动轮播效果（伪文字轮播）
- javascript实现文字列表无缝向上滚动
- jq 实现文字定时向上滚动效果
- 实现图片滑动、滚动、菜单栏（导航）滑动、文字滚动等效果的网页插件superslide2
- js实现文字列表无缝向上滚动
- 实现双击网页后页面自动向上滚动
- jquery实现文字向上滚动
- JavaScript实现文字列表无缝向上滚动
- 利用CSS3实现的文字定时向上滚动
- jQuery实现单行文字间歇向上滚动源代码
- JS实现单行文字不间断向上滚动的方法
- JS实现单行文字不间断向上滚动的方法
- jQuery实现的文字逐行向上间歇滚动效果示例
- 实现图片滑动、滚动、菜单栏（导航）滑动、文字滚动等效果的网页插件superslide2