文字信息滚动是经常用到的效果！单独的marquee的html标签就已经实现了这种文字滚动的效果，但由于效果太单一，现在使用这种原始的效果已经很少了！下面我就介绍一些比较常见的文字滚动效果！
首先介绍的是原始的marquee标签实现的滚动的效果！
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML文字滚动效果</title>
<style>
*{margin:0;padding:0;}
.box{width:500px;border:3px solid #ccc;margin:50px auto 0;padding:10px;}
dl,dt{list-style:none;}
dl dt{line-height:24px;font-size:16px;font-weight:bold;color:#000;}
</style>
</head>
<body>
<div class="box">
<dl>
<dt>文字滚动示例（默认）：</dt>
<dd><marquee>我默认向左滚。。。。。</marquee></dd>
</dl>
<dl>
<dt>文字滚动示例（向右）：</dt>
<dd><marquee direction="right" scrolldelay="500">我向右滚动。。。。</marquee></dd>
</dl>
<dl>
<dt>文字滚动示例（默认方向，滚动方式为alternate，循环3次，速度为2）：</dt>
<dd><marquee scrollamount="2" behavior="alternate" loop="3">我来回滚动。。。。</marquee></dd>
</dl>
<dl>
<dt>文字滚动示例（向上，背景色为#CCFF66，设置了背景宽度和高度）：</dt>
<dd><marquee direction="up" bgcolor="#CCFF66" width="250" height="55">我在区域内滚动，向上哟。。。。</marquee></dd>
</dl>
</div>
</body>
</html>
这种原始的信息滚动不需要js来实现，只需要设置相应的参数就可以了！
第二种：介绍的是通过设置容器的垂直滚动高度和滚动区域的高度来实现信息滚动的效果！(文字向上无缝滚动)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>向上无缝滚动</title>
<style>
body {font-size: 12px;line-height: 24px;text-algin: center; /* 页面内容居中 */}
* {margin: 0px;padding: 0px; /* 去掉所有标签的marign和padding的值 */}
ul {list-style: none; /* 去掉ul标签默认的点样式 */}
a img {border: none; /* 超链接下，图片的边框 */}
a {color: #333;text-decoration: none; /* 超链接样式 */}
a:hover {color: #ff0000;}
#mooc {width: 399px;border: 5px solid #ababab;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius: 15px;
box-shadow: 2px 2px 10px #ababab;
margin: 50px auto 0;
text-align: left; /* 让新闻内容靠左 */
}
/* 头部样式 */
#moocTitle {
height: 62px;
overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
font-size: 26px;
line-height: 62px;
padding-left: 30px;
background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#8fa1ff‘, endColorstr=‘#f05e6f‘, GradientType=‘0‘); /* IE*/
border: 1px solid ##f05e6f;
-moz-border-radius: 8px 8px 0 0; /* Gecko browsers */
-webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */
border-radius: 8px 8px 0 0;
color: #fff;
position: relative;
}
#moocTitle a {
position: absolute;
right: 10px;
bottom: 10px;
display: inline;
color: #fff;
font-size: 12px;
line-height: 24px;
}
/* 底部样式 */
#moocBot {
width: 399px;
height: 10px;
overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
}
/* 中间样式 */
#moocBox {
height: 144px;
width: 335px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
}
#mooc ul li {
height: 24px;
}
#mooc ul li a {
width: 180px;
float: left;
display: block;
overflow: hidden;
text-indent: 15px;
height: 24px;
}
#mooc ul li span {
float: right;
color: #999;
}
</style>
</head>
<body>
<div id="mooc">
<div id="moocBox">
<ul id="con1">
<li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
<li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
<li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
<li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="con2">
</ul>
</div>
<!-- 中间结束 -->
</div>
<script type="text/javascript">
function scrollUp(){
var area = document.getElementById(‘moocBox‘);
if(area.scrollTop >= con1.scrollHeight) {
area.scrollTop = 0;
}else{
area.scrollTop ++;
}
}
function scr(){
var area = document.getElementById(‘moocBox‘);
var con1 = document.getElementById(‘con1‘);
var con2 = document.getElementById(‘con2‘);
var speed = 50;
area.scrollTop = 0;//指的是滚动条的垂直坐标
con2.innerHTML = con1.innerHTML;
var myScroll = setInterval(‘scrollUp()‘,speed);
area.onmouseover = function(){
clearInterval(myScroll);
}
area.onmouseout = function(){
myScroll = setInterval(‘scrollUp()‘,speed);
}
}
scr();
</script>
</body>
</html>
第三种：文字向上间歇性无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻无缝向上无缝滚动</title>
<style>
body {
font-size: 12px;
line-height: 24px;
text-algin: center; /* 页面内容居中 */
}
* {
margin: 0px;
padding: 0px; /* 去掉所有标签的marign和padding的值 */
}
ul {
list-style: none; /* 去掉ul标签默认的点样式 */
}
a img {
border: none; /* 超链接下，图片的边框 */
}
a {
color: #333;
text-decoration: none; /* 超链接样式 */
}
a:hover {
color: #ff0000;
}
#mooc {
width: 399px;
border: 5px solid #ababab;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius: 15px;
box-shadow: 2px 2px 10px #ababab;
margin: 50px auto 0;
text-align: left; /* 让新闻内容靠左 */
}
/* 头部样式 */
#moocTitle {
height: 62px;
overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
font-size: 26px;
line-height: 62px;
padding-left: 30px;
background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#8fa1ff‘, endColorstr=‘#f05e6f‘, GradientType=‘0‘); /* IE*/
border: 1px solid ##f05e6f;
-moz-border-radius: 8px 8px 0 0; /* Gecko browsers */
-webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */
border-radius: 8px 8px 0 0;
color: #fff;
position: relative;
}
#moocTitle a {
position: absolute;
right: 10px;
bottom: 10px;
display: inline;
color: #fff;
font-size: 12px;
line-height: 24px;
}
/* 底部样式 */
#moocBot {
width: 399px;
height: 10px;
overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
}
/* 中间样式 */
#moocBox {
height: 144px;
width: 335px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
}
#mooc ul li {
height: 24px;
}
#mooc ul li a {
width: 180px;
float: left;
display: block;
overflow: hidden;
text-indent: 15px;
height: 24px;
}
#mooc ul li span {
float: right;
color: #999;
}
</style>
</head>
<body>
<div id="mooc">
<div id="moocBox">
<ul>
<li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
<li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
<li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
<li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
</ul>
</div>
<div id ="moocBot"> </div>
</div>
<script type="text/javascript">
var area = document.getElementById(‘moocBox‘);
var iliHeight = 24;//单行滚动的高度
var speed = 50;//滚动的速度
var time;
var delay= 2000;//设置延迟执行时间
area.scrollTop=0;
area.innerHTML+=area.innerHTML;//克隆一份一样的内容
function startScroll(){
time=setInterval("scrollUp()",speed);
area.scrollTop++;
}
function scrollUp(){
if(area.scrollTop % iliHeight==0){
//如果当前滚动高度为单行高度的倍数
clearInterval(time);
setTimeout(startScroll,delay);//延迟执行2000毫秒
}else{
area.scrollTop++;
if(area.scrollTop >= area.scrollHeight/2){
area.scrollTop =0;
}
}
}
setTimeout(startScroll,delay);
</script>
</body>
</html>
第四种：采用jquery动画来实现（文字是从下往上滚动--渐隐渐出）
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxx</title>
<style type="text/css">
#sidebar{width:200px; height:240px; overflow:hidden; margin:0 auto; background:#f00; color:#fff;}
#marquee{width:200px;}
#marquee li{width:200px;height:20px; line-height:20px;}
</style>
</head>
<body>
<div class="gift_list" id="sidebar">
<ul id="marquee" class="marquee spy">
<li><em class="fl">111111111</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">222222222</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">333333333</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">444444444</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">555555555</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">666666666</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">777777777</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">888888888</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">999999999</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">aaaaaaaaa</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">bbbbbbbbb</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">ccccccccc</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">ddddddddd</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(‘ul.spy‘).simpleSpy();
});
(function ($) {
$.fn.simpleSpy = function (limit, interval) {
limit = limit || 12;//展示数量
interval = interval || 4000;
return this.each(function () {
var $list = $(this),//将当前对象传给$list
items = [],
currentItem = 0,
total = 0,
height = $list.find(‘> li:first‘).height();//20
$list.find(‘> li‘).each(function () {
items.push(‘<li>‘ + $(this).html() + ‘</li>‘);
//将所有的元素导进去，放到数组items
});
total = items.length;//获取所有li元素长度
$list.wrap(‘<div class="spyWrapper" />‘).parent().css({ height : height * limit });
//用<div class="spyWrapper" />包裹元素，并设置高度
$list.find(‘> li‘).filter(‘:gt(‘+(limit-1)+‘)‘).remove();//移除最后一个元素
function spy() {
var $insert = $(items[currentItem]).css({
//设置列表第一个元素高度0，透明度为0，并消失
height : 0,
opacity : 0,
display : ‘none‘
}).appendTo($list);//appendTo() 方法在被选元素的后面（仍位于内部）插入指定内容。
$list.find(‘> li:first‘).animate({ opacity : 0,height : 0}, 1000, function () {
$(this).remove();
$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
});
currentItem++;
if (currentItem >= total) {
currentItem = 0;
}
setTimeout(spy, interval);
}
spy();
});
};
})(jQuery);
</script>
第五种：是修改第四种来实现反方向的滚动效果
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxx</title>
<style type="text/css">
#sidebar{width:200px; height;500px; overflow:hidden; margin:0 auto; background:#f00; color:#fff;}
#marquee{width:200px;}
#marquee li{width:200px;height:20px; line-height:20px;}
</style>
</head>
<body>
<div class="gift_list" id="sidebar">
<ul id="marquee" class="marquee spy">
<li><em class="fl">xxxxxxxxxx</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">cccccccccc</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">cvcvcccvvv</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">rrrrrrrrrr</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">jjjjjjjjjj</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">3333333333</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">55555555555</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">7777777777</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">553424555454</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">sssssss</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">dddddddddd</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">fggggggggg</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
<li><em class="fl">3222222222</em> <span class="fl">获得</span> <span class="fr">豪华道具礼包</span></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(‘ul.spy‘).simpleSpy();
});
(function ($) {
$.fn.simpleSpy = function (limit, interval) {
limit = limit || 12;//展示数量
interval = interval || 4000;
return this.each(function () {
var $list = $(this),
items = [],
currentItem = limit,//数量12
total = 0,
height = $list.find(‘> li:first‘).height();//20
$list.find(‘> li‘).each(function () {
items.push(‘<li>‘ + $(this).html() + ‘</li>‘);
//将所有的元素导进去，放到数组items
});
total = items.length;//获取所有li元素长度
$list.wrap(‘<div class="spyWrapper" />‘).parent().css({ height : height * limit });
//用<div class="spyWrapper" />包裹元素，并设置高度
$list.find(‘> li‘).filter(‘:gt(‘ + (limit - 1) + ‘)‘).remove();//移除最后一个元素
function spy() {
var $insert = $(items[currentItem]).css({
//设置列表最后一个元素高度0，透明度为0，并消失
height : 0,
opacity : 0,
display : ‘none‘
}).prependTo($list);//prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容。
$list.find(‘> li:last‘).animate({ opacity : 0}, 1000, function () {
$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
$(this).remove();
});
currentItem++;
if (currentItem >= total) {
currentItem = 0;
}
setTimeout(spy, interval);
}
spy();
});
};
})(jQuery);
</script>
上述效果可以解决一般的文字滚动需求！
时间： 2024-10-10 11:26:04