标签：文字 function 模范 滚动 党支部 myscroll intId 编写 speed
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>
很简单，把代码复制过去一看就懂。
标签：文字,function,模范,滚动,党支部,myscroll,intId,编写,speed 来源： https://blog.csdn.net/Q905828/article/details/118443106
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。