横向定时滚动table

最新推荐文章于 2022-06-09 11:28:27 发布

Fade Away

最新推荐文章于 2022-06-09 11:28:27 发布

阅读量166

点赞数

分类专栏：定时器 JS CSS进阶

本文链接：https://blog.csdn.net/qq_26239917/article/details/102695576

版权

JS 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

CSS进阶

15 篇文章 0 订阅

订阅专栏

定时器

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.scrollView{
				width: 365px;
				/* height: 300px; */
				overflow: auto;
			}
			table{
				width:100%;
				border-collapse: collapse;
				border-spacing: 0;
				padding:0;  
				margin:0;  
			}
			table tr td{
				width: 100px;
				height: 50px;
			    border:1px solid red;
				text-align: center;
			}
			.item{
				background: green;
				width: 1000px;
				/* height: 300px; */
			}
			.scrollView::-webkit-scrollbar {
			height: 0px;
			
			/* width: 10px; */
			background-color: #eee;
			}
			
			.scrollView::-webkit-scrollbar-track {
			background-color: #eee;
			}
			
			.scrollView::-webkit-scrollbar-thumb {
			border-radius: .04rem;
			background: #ABAB00;
			background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
			}
			
			.scrollView::-webkit-scrollbar-button {
			display: none;
			}
			
		</style>
	</head>
	<body>
		<div class="scrollView">

		</div>
	</body>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
		let flag = false;
		let scrollView = document.querySelector(".scrollView")
		let data = []
		for (var i = 0; i < 37; i++) {
			let item = {
				name: `M-${i}`,
				stage: ['stage-A'],
				value: `${i}`
			}
			data.push(item)
		}
		let ele = document.querySelector(".scrollView")
		let table = document.createElement("table")
		// cellspacing:0;  
		//    cellpadding:0;  

		for (let j = 0; j < 3; j++) {
			let tr = document.createElement("tr")
			for (let i = 0; i < data.length; i++) {
				let td = document.createElement("td")
				if (j == 0) {
					td.innerHTML = data[i]['name']
				}
				if (j == 1) {
					td.innerHTML = data[i]['stage'][0]
				}
				if (j == 2) {
					td.innerHTML = data[i]['value']
				}
				// console.log(td)
				tr.appendChild(td)
			}
			table.appendChild(tr)
		}
		scrollView.appendChild(table)
		ele.scrollLeft = 0;
		count = 0;
		let timer = setInterval(function() {
			console.log(count++);
				$(ele).animate({
					scrollLeft: "+=365"
				}, 1000);
				
				console.log(ele.scrollLeft + 365*2,ele.scrollWidth)
				if (Math.floor((ele.scrollLeft + 365*2)) >= ele.scrollWidth) {
						$(ele).animate({
							scrollLeft: "0"
						},0);
				}
			}
		, 2000)
		
		
	</script>
</html>

Fade Away

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
横向定时滚动table

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .scrollView{ width: 365px; /* height: 300px; */ overflow: a...
复制链接

扫一扫