<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style type="text/css">
ul,li{
margin:0;
padding: 0;
list-style: none;
}
#content{
border: 1px solid #ddd;
height:30px;
overflow: hidden;
}
.ulCss li{
height:30px;
line-height: 30px;
font-size: 12px;
}
</style>
<script type="text/javascript">
$(function(){
var i=0;
var size = $(".ulCss li").size();
setInterval(function (){
i++;
if(i >=size){
i=0;
$("#content").animate({scrollTop:i*30 },10);
}else{
$("#content").animate({scrollTop:i*30 },500);
}
}, 2000);
});
</script>
</head>
<body>
<div id="content">
<ul class="ulCss">
<li>百度</li>
<li>谷歌</li>
<li>火狐</li>
<li>苹果</li>
</ul>s
</div>
</body>
</html>
仿CSDN的滚动效果:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
ul{
margin: 0px;
padding: 0px;
}
ul li{
list-style: none;
}
a{
text-decoration:none;
}
.scrollDiv {
position: absolute;
top: 100px;
left: 100px;
right: 0px;
background-color: #ccc;
/*高度固定*/
height: 29px;
/*隐藏多余的部分*/
overflow: hidden;
font-weight: normal;
font-size: 14px;
line-height: 29px;
border: 1px solid red;
}
</style>
<script type="text/javascript">
//滚动插件
(function($){
$.fn.extend({
Scroll:function(opt,callback){
//参数初始化;初始化配置
if(!opt) var opt = {
};
//this表示div元素;获取div下的第一个ul的jQuery对象
var _this = this.eq(0).find("ul:first");
//获取行高;scrollDiv的高度;第一个列表li的高度
var lineH = _this.find("li:first").height();
//每次滚动的行数,默认为一屏,即父容器高度
var line = opt.line ? parseInt(opt.line,10) : parseInt(this.height()/lineH,10);
卷动速度,数值越大,速度越慢(毫秒)
var speed = opt.speed ? parseInt(opt.speed,10) : 500;
//滚动的时间间隔(毫秒)
var timer = opt.timer ? parseInt(opt.timer,10) : 4000;
if(line == 0){
line=1;
}
var upHeight = 0 - line * lineH;
//滚动函数
var scrollUp = function(){
//_this为ul列表
_this.animate({
//往上移29px;
marginTop:upHeight
},speed,function(){
for(var i=1;i<=line;i++){
//把第一个li加到ul的末尾
_this.find("li:first").appendTo(_this);
}
//再置为0
_this.css({marginTop:0});
});
};
//鼠标事件绑定
_this.hover(function(){
clearInterval(_this.timerID);
},function(){
_this.timerID = setInterval(scrollUp,timer);
}).mouseout();
}
});
})(jQuery);
$(document).ready(function(){
$("#scrollDiv").Scroll({line:1,speed:50,timer:50});
});
</script>
</head>
<body>
<div class="mainContent">
<div id="scrollDiv" class="scrollDiv">
<ul style="margin-top:0px;">
<li><a href="http://www.baidu.com" target="_blank" title="百度">百度</a></li>
<li><a href="http://www.google.com.cn" target="_blank" title="谷歌">谷歌</a></li>
<li><a href="http://www.qq.com" target="_blank" title="QQ">QQ</a></li>
</ul>
</div>
</div>
</body>
</html>