jquery扩展方法:实现模拟Marquee无限循环滚动
在一些网站的公告栏有这样的一个效果，如果有多条公告就会出现上下滚动效果【也叫做跑马灯效果】，这是如何实现的呢？下面通过基于jquery的扩展,实现模拟Marquee无缝滚动效果,并能控制滚动的速度。
html:
<style>
.scroll{
height: 40px;
line-height: 20px;
overflow: hidden;
}
</style>
<div class="scroll">
<ul>
<li>jquery扩展方法:实现无限循环滚动01</li>
<li>jquery扩展方法:实现无限循环滚动02</li>
<li>jquery扩展方法:实现无限循环滚动03</li>
<li>jquery扩展方法:实现无限循环滚动04</li>
</ul>
</div>jquery扩展
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
(function($){
$.fn.toScroll = 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);
});
}
})(jQuery);
</script>使用：
<script>
//执行
$(function() {
$('.scroll').toScroll({
speed: 40, //数值越大，速度越慢
rowHeight: 20 //li的高度
});
})
</script>本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
