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>

广州设计公司https://www.houdianzi.com 我的007办公资源网站https://www.wode007.com

使用：

<script>
	//执行
	$(function() {
		$('.scroll').toScroll({
			speed: 40, //数值越大，速度越慢
			rowHeight: 20 //li的高度
		});
	})
</script>