1.分装一个scroll.js
// JavaScript Document
(function($){
$.fn.myScroll = function(options){
//默认配置
var defaults = {
speed:40, //滚动速度,值越大速度越慢
rowHeight:24 //每行的高度
};
var opts = $.extend({}, defaults, options),intId = [];
function marquee(obj, step){
obj.find("ul").animate({
marginTop: '-=1'
},0,function(){
var s = Math.abs(parseInt($(this).css("margin-top")));
if(s >= step){
$(this).find("li").slice(0, 1).appendTo($(this));
$(this).css("margin-top", 0);
}
});
}
this.each(function(i){
var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed);
_this.hover(function(){
clearInterval(intId[i]);
},function(){
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed);
});
});
}
})(jQuery);
2.在HTML中写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.myscroll {
width: 300px;
height: 260px;
margin: 0 auto;
border: 1px solid #ccc;
line-height: 26px;
font-size: 12px;
overflow: hidden;
}
.myscroll li {
height: 26px;
margin-left: 25px;
}
.myscroll a {
color: #333;
text-decoration: none;
}
.myscroll a:hover {
color: #ED5565;
text-decoration: underline;
}
</style>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/scroll.js"></script>
<script type="text/javascript">
$(function() {
$(' .myscroll').myScroll({
speed: 40, //数值越大，速度越慢
rowHeight: 100 //li的高度
});
});
</script>
<body>
<div class="myscroll">
<ul>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部<li> <a href="#">
模范党支部部
</a></li>
</a>
</li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
</ul>
</div>
<div class="myscroll">
<ul>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部<li> <a href="#">
模范党支部部
</a></li>
</a>
</li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
</ul>
</div>
<div class="myscroll">
<ul>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部<li> <a href="#">
模范党支部部
</a></li>
</a>
</li>
<li> <a href="#">
模范党支部部
</a></li>
<li> <a href="#">
模范党支部部
</a></li>
</ul>
</div>
</body>
</html>
很简单，把代码复制过去一看就懂。