master

分支 (1)

管理

管理

master

jsdemo
/
sport4.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>运动框架3 box从右向左运动到临界值</title>
	<style>
		*{margin: 0; padding: 0;}
		.box{
			width:700px;
			height: 120px;
			margin: 40px auto;
			border: 1px solid #000;
			overflow: hidden;
			zoom:1;
			position: relative;
		}
		.box ul {
			width:5000px;
			height: 100%;
			position: absolute;
			top: 0;
			left:0;
		}
		.box li{
			width: 200px;
			height: 120px;
			line-height: 120px;
			font-size: 60px;
			float: left;
			display: inline;
			text-align: center;
		}
		.box .li1{
			background-color: pink;
		}
		.box .li2{
			background-color: skyblue;
		}
		.box .li3{
			background-color: green;
		}
		.box .li4{
			background-color: goldenrod;
		}
		.box .li5{
			background-color: palegreen;
		}
		.box .li6{
			background-color: orange;
		}
		.box .li7{
			background-color: salmon;
		}
		.box .li8{
			background-color: magenta;
		}
		.box .li9{
			background-color: #FA8072;
		}

	</style>
</head>
<body>
	<div class="box" id="box">
		<ul>
			<li class="li1">1</li>
			<li class="li2">2</li>
			<li class="li3">3</li>
			<li class="li4">4</li>
			<li class="li5">5</li>
			<li class="li6">6</li>
			<li class="li7">7</li>
			<li class="li8">8</li>
			<li class="li9">9</li>
		</ul>
	</div>
	<script>
		window.onload = function(){
			var oBox = document.getElementById("box");
			var oUl = oBox.getElementsByTagName("ul")[0];
			var oLi = oUl.getElementsByTagName("li");
			var oLiWidth = oLi[0].offsetWidth;
			var timer = 0;

			oUl.innerHTML += oUl.innerHTML;
			//oUl.style.width = oLiWidth * oLi.length + 'px';

			var num = 0;
			setInterval(function(){
				num -= 10;
				if (num < -200 * oLi.length ){
					num = 0;
				}
				oUl.style.left = num + 'px';
			},10);

		}
	</script>
</body>
</html>