发新贴  快速回复

上下浮动小练习,我自己写的代码,分享一下,有需要改正的地方,请别吝啬批词,谢谢。。。

降落之羽
2017-11-12 00:07

 <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

</style>

<script src="JS引用/doMove;.js"></script>

<script type="text/javascript">

window.onload=function(){

var str='';

var len=20;

var aDiv=document.getElementsByTagName('div');

var timer=null;

var num=0;

for (var i = 0; i < len;i++) {

str+='<div style="width:50px;height:50px;background:red;position:absolute;top:0;left:'+i*60+'px;"></div>';

}

document.body.innerHTML=str;

document.onclick=function(){

clearInterval(timer);

if (parseInt(getStyle(aDiv[num],'top'))===0) {

timer=setInterval(function(){

doMove(aDiv[num],'top',23,500);

num++;

if (num===len) {

clearInterval(timer);

num=0;

}

},100);

 

}else if(parseInt(getStyle(aDiv[len-1],'top'))===500){

timer=setInterval(function(){

doMove(aDiv[len-1],'top',23,0);

len--;

if (len===0) {

clearInterval(timer);

len=20;

}

},100);

 

}

};

};

 

</script>

</head>

<body>

</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

本帖内容针对以下视频发布:

4-doMove应用-小练习
2017年2月8日
<script src="JS引用/doMove;.js"></script>这个js你也要放进来,不然怎么运行你的代码。
2017-11-12 07:50  回复本帖
降落之羽

2017年2月8日 2017-11-12 07:50发表的内容:

<script src="JS引用/doMove;.js"></script>这个js你也要放进来,不然怎么运行你的代码。
doMove,就是视频里,老师教的,那个函数封装,只有名字变化,内容没变,把自己的那个带入就行了,,就是这个
function doMove(obj,attr,dir,dest,endFn){
dir=parseInt(getStyle(obj,attr))<dest?dir:-dir;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=parseInt(getStyle(obj,attr))+dir;
if (speed>dest&&dir>0||speed<dest&&dir<0){
speed=dest;
}

obj.style[attr]=speed+'px';


if (speed==dest) {
clearInterval(obj.timer);
endFn&&endFn();
}
},30);
}

function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
2017-11-14 23:56  回复本帖
登录 后才可以发表回复