循环运动
Posted wanghao1994
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了循环运动相关的知识，希望对你有一定的参考价值。
利用js的回调函数特征：
相互调用，实现方块的循环变色滚动，代码如下：
css：样式：
<style>
div{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
}
</style>
js：代码：
<script>
var left=0;
var tops =0;
var div = document.querySelector("div");
function fnLeft(fn,fn1,fn2){
var f=arguments.callee;
var dis = setInterval(function(){
left+=5;
if(left<=800){
div.style.left=left+"px";
div.style.backgroundColor="red";
}else{
clearInterval(dis);
fn(fn1,fn2,f);
}
// clearInterval(dis);
},30)
}
function fnTop(fn,fn1,fn2){
console.log("aaaa");
var f=arguments.callee;
var dis = setInterval(function(){
tops+=5;
if(tops<=400){
div.style.top=tops+"px";
div.style.backgroundColor="purple"
}else{
clearInterval(dis);
fn(fn1,fn2,f)
}
},30)
}
function fnRight(fn,fn1,fn2){
var f=arguments.callee;
var dis = setInterval(function(){
console.log(left);
left-=5;
if(left>=0){
div.style.left=left+"px";
div.style.backgroundColor="green"
}else{
clearInterval(dis);
fn(fn1,fn2,f);
}
},30)
}
function fnBottom(fn,fn1,fn2){
console.log("vbbbbb");
var f=arguments.callee;
var dis=setInterval(function(){
tops-=5;
if(tops>=0){
div.style.top=tops+"px";
div.style.backgroundColor="yellow"
}else{
clearInterval(dis);
fn(fn1,fn2,f);
}
},30)
}
fnLeft(fnTop,fnRight,fnBottom);
</script>
以上是关于循环运动的主要内容，如果未能解决你的问题，请参考以下文章