jquery myscroll文字上下无缝滚动插件简单使用

大番薯没有心

于 2020-08-06 15:49:07 发布

阅读量1.2k

点赞数

分类专栏：前端相关

本文链接：https://blog.csdn.net/m0_37230651/article/details/107841791

版权

前端相关专栏收录该内容

15 篇文章 0 订阅

订阅专栏

效果图

scroll_table.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格滚动</title>
		<script src="jquery.min.1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="scroll_table.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				function getData() {
					var html = '';
					for (var i = 0; i < 100; i++) {
						var value = i + 1;
						html += '<tr>' +
							'<td>' + value + '</td>' +
							'<td>' + value + '</td>' +
							'<td>' + value + '</td>' +
							'<td>' + value + '</td>' +
							'</tr>';
					}
					$('#tbList').html(html);
				}
				
				getData();
				setTimeout(function() {
					$('.s_div').myScroll({
						speed: 60,
						rowHeight: 40
					});
				}, 500);
			});
		</script>
		<style type="text/css">
			table{
				width: 100%;
			}
			#tbList tr{
				height: 40px;	/*不给固定高度，会抽搐*/
			}
			#tbList tr td{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="main_table" style="width: 600px; height: 400px; margin: 0 auto; border: 1px solid #eee;">
			<table class="table-info-header">
				<colgroup>
					<col width="25%" />
					<col width="25%" />
					<col width="25%" />
					<col width="25%" />
				</colgroup>
				<thead>
					<tr>
						<th>
							1
						</th>
						<th>
							2
						</th>
						<th>
							3
						</th>
						<th>
							4
						</th>
					</tr>
				</thead>
			</table>
			<div class="s_div" style="height:320px;overflow: hidden;">
				<table class="table-info">
					<colgroup>
						<col width="25%" />
						<col width="25%" />
						<col width="25%" />
						<col width="25%" />
					</colgroup>
					<tbody id="tbList">
					</tbody>
				</table>
			</div>
		</div>
	</body>
</html>

scroll_table.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("table").animate({
				marginTop: '-=1'
			}, 0, function() {
				var s = Math.abs(parseInt($(this).css("margin-top")));
				if (s >= step) {
					$(this).find("tr").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("table").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("table").height() <= _this.height()) {
						clearInterval(intId[i]);
					} else {
						marquee(_this, sh);
					}
				}, speed);
			});

		});

	}

})(jQuery);

scroll_ul.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表滚动</title>
		<script src="jquery.min.1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="scroll_ul.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				function getData() {
					var html = '';
					for (var i = 0; i < 100; i++) {
						var value = i + 1;
						html += '<li>' + value + '</li>';
					}
					$('#tbList').html(html);
				}

				getData();
				setTimeout(function() {
					$('.s_div').myScroll({
						speed: 60,
						rowHeight: 40
					});
				}, 500);
			});
		</script>
		<style type="text/css">
			.list {
				width: 270px;
				border: 1px solid #eee;
				margin: 30px auto;
			}

			.s_div {
				height: 400px;
				overflow: hidden;
			}
			
			#tbList li{
				height: 40px;	/*不给固定高度，会抽搐*/
			}
		</style>
	</head>
	<body>
		<div class="list">
			<h2>列表滚动</h2>
			<div class="s_div">
				<ul id="tbList"></ul>
			</div>
		</div>
	</body>
</html>

scroll_ul.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);

大番薯没有心

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery myscroll文字上下无缝滚动插件简单使用

效果图scroll_table.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表格滚动</title> <script src="jquery.min.1.8.3.js" type="text/javascript" charset="utf-8"></script> <script src="
复制链接

扫一扫