jquery扩展方法:实现模拟Marquee无限循环滚动

时间: 2020-01-22阅读: 179标签: 滚动

在一些网站的公告栏有这样的一个效果,如果有多条公告就会出现上下滚动效果【也叫做跑马灯效果】,这是如何实现的呢?下面通过基于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>


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/7246

JS原生实现连续滚动文字

最近在工作中遇到,文字在大屏中,出现底部有留白导致不连续的现象,很奇怪,故写这篇文章细究其原因;offsetTop 小于等于 scrollTop时 scrollTop至为0,此次滚动条回到初始位置

DOM盒模型和位置 client offset scroll 和滚动的关系

在dom里面有几个描述盒子位置信息的值,pading border margin,width height,client;盒模型生产环境一般使用 box-sizing: border-box,效果:width == content.width + pading + border

页面平滑滚动小技巧

今天写需求的时候发现一个小的优化点:用户选择了一些数据之后, 对应列表中的数据需要高亮, 有时候列表很长, 为了提升用户体验,需要加个滚动, 自动滚动到目标位置。

overflow滚动条如何隐藏?

隐藏滚动条有很多方法,比较简单和直观的方法可以使用::-webkit-scrollbar来完成,这样的话就把box本身的滚动条隐藏了。如果要兼容 PC 其他浏览器

vue 无限滚动问题

如今web开发中,无限加载是必需的一项功能,尤其是在移动端开发中,一个列表往往默认只加载10条,想看更多只能逐渐往下翻页。那么今天就看看如何在Vue-Cli中实现这个功能

90行代码,15个元素实现无限滚动

在本篇文章你将会学到:IntersectionObserver API 的用法,以及如何兼容。如何在 React Hook 中实现无限滚动。如何正确渲染多达10000个元素的列表。无限下拉加载技术使用户在大量成块的内容面前一直滚动查看

完美解决H5滚动滑动穿透方案:不使用系统滚动

网上有很多黑科技解决这个问题,都不是从根本去解决,例如通过js控制弹出时html加上position:fixed; 弹窗关闭后再去掉该样式,总觉得不太对,像是打补丁。

解析移动端滚动穿透

滚动穿透在移动端开发中是一个很常见的问题,产生诡异的交互行为,影响用户体验,同时也让我们的产品看起来不那么“专业”。虽然不少产品选择容忍了这样的行为,但是作为追求极致的工程师,应该去了解为什么会产生以及如何去解决

js中scroll滚动

scroll,滚动,一般讨论的是网页整体与浏览器之间的关系。这四个属性,全部是只读属性,其中,无非就是分为宽高和左上。两个方向。

js 禁止/允许页面滚动

passive,设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿。等待监听器的执行是耗时的,有些甚至耗时很明显,这样就会导致页面卡顿。即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全