开源达人,html+css+js 原生动画计时器的运用。

<style type="text/css">
	#myContainer {
		width: 400px;
		height: 400px;
		position: relative;
		background: yellow;
	}

	#myAnimation {
		width: 50px;
		height: 50px;
		position: absolute;
		background-color: red;
	}
</style>

<p>
	<button onclick="myMove()">点我</button>
</p>

<div id="myContainer">
	<div id="myAnimation"></div>
</div>

<script>
	function myMove(){
		var myContainer = document.getElementById('myContainer');
		var myAnimation = document.getElementById('myAnimation');
		var a = 0;
		var id = setInterval(Move,10);
		
		function Move(){
			if(a==350){
				clearInterval(id);
				
			}else{
				a++;
				myAnimation.style.top= a + 'px';
				myAnimation.style.left = a + 'px';
			}
		}
	}
</script>

发表评论