JS实现简单的缓慢动画代码,Js代码库,德仔网

代码语言

代码分类

【Js】 JS实现简单的缓慢动画

作者:新玄 / 发布于2018/3/22/ 716

css样式

<style>
		body{
			margin: 0px;
			padding: 0px;
		}
		div{
			width: 400px;
			height: 400px;
			background-color: #ccc;
			position: absolute;
		}
	</style>

js代码

<button>向右移动</button>
	<button>向左移动</button>
	<div></div>
	<script>
	 var btn1=document.getElementsByTagName('button')[0];
	 var btn2=document.getElementsByTagName('button')[1];
	 var div=document.getElementsByTagName('div')[0];
	   btn1.addEventListener('click',function(){
	   	clearInterval(div.timer);
	   	div.timer=setInterval(function(){
	   		if (div.offsetLeft>=400) {		
	   			clearInterval(div.timer);
	   		}else{
	   			var step=Math.ceil((400-div.offsetLeft)/10);
	   			div.style.left=div.offsetLeft+step+"px";
	   		}
	   	},15)
	   })
	   btn2.addEventListener('click',function(){
	   	 clearInterval(div.timer);
	   	div.timer=setInterval(function(){
	   		if (div.offsetLeft<=0) {
	   			clearInterval(div.timer);
	   		} else {
	   			var step=Math.floor((0-div.offsetLeft)/10);
	   			// console.log(step);
	   			div.style.left=div.offsetLeft+step+"px";
	   			console.log(2);
	   		}
	   	},15)
	   })
	</script>

试试其它关键字

同语言下

可能有用的

新玄贡献的其它代码(13)