求解一段js代码?看不太懂

阿拉丁神灯2009 2013-11-24 01:49:12
function css(obj, attr, value)
{
if(arguments.length==2)
{
if(attr!='opacity')
{
return parseInt(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]);
}
else
{
return Math.round(100*parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]));
}
}
else if(arguments.length==3)
switch(attr)
{
case 'width':
case 'height':
case 'paddingLeft':
case 'paddingTop':
case 'paddingRight':
case 'paddingBottom':
value=Math.max(value,0);
case 'left':
case 'top':
case 'marginLeft':
case 'marginTop':
case 'marginRight':
case 'marginBottom':
obj.style[attr]=value+'px';
break;
case 'opacity':
obj.style.filter="alpha(opacity:"+value+")";
obj.style.opacity=value/100;
break;
default:
obj.style[attr]=value;
}
return function (attr_in, value_in){css(obj, attr_in, value_in)};//这个返回函数有什么用?他的参数attr_in,value_in上面都没有啊???

}

var MIAOV_MOVE_TYPE={
BUFFER: 1,
FLEX: 2
};

function miaovStopMove(obj)
{
clearInterval(obj.timer);//这个obj有timer属性吗?这是自己定义的嘛?我没看的过这个属性
}

function miaovStartMove(obj, oTarget, iType, fnCallBack, fnDuring)
{
var fnMove=null;
if(obj.timer)
{
clearInterval(obj.timer);
}

switch(iType)
{
case MIAOV_MOVE_TYPE.BUFFER:
fnMove=miaovDoMoveBuffer;
break;
case MIAOV_MOVE_TYPE.FLEX:
fnMove=miaovDoMoveFlex;
break;
}

obj.timer=setInterval(function (){
fnMove(obj, oTarget, fnCallBack, fnDuring);//这个函数最后两个函数有什么用???
}, 30);
}

function miaovDoMoveBuffer(obj, oTarget, fnCallBack, fnDuring)
{
var bStop=true;
var attr='';
var speed=0;
var cur=0;

for(attr in oTarget)
{
cur=css(obj, attr);
if(oTarget[attr]!=cur)
{
bStop=false;

speed=(oTarget[attr]-cur)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);

css(obj, attr, cur+speed);
}
}

if(fnDuring)fnDuring.call(obj);

if(bStop)
{
clearInterval(obj.timer);
obj.timer=null;

if(fnCallBack)fnCallBack.call(obj);//这行代码完全看不懂
}
}

function miaovDoMoveFlex(obj, oTarget, fnCallBack, fnDuring)
{
var bStop=true;
var attr='';
var speed=0;
var cur=0;

for(attr in oTarget)
{
if(!obj.oSpeed)obj.oSpeed={};
if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
cur=css(obj, attr);
if(Math.abs(oTarget[attr]-cur)>=1 || Math.abs(obj.oSpeed[attr])>=1)
{
bStop=false;

obj.oSpeed[attr]+=(oTarget[attr]-cur)/5;
obj.oSpeed[attr]*=0.7;

css(obj, attr, cur+obj.oSpeed[attr]);
}
}

if(fnDuring)fnDuring.call(obj);

if(bStop)
{
clearInterval(obj.timer);
obj.timer=null;

if(fnCallBack)fnCallBack.call(obj);
}
}
希望能完全讲解一下这段代码的全部运行调用过程!上面只是标注了几点看不懂,其实后面两个函数方法完全没看懂!
...全文
198 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
hellNo 2013-11-25
  • 打赏
  • 举报
回复
我也看不懂,帮顶
zhjdg 2013-11-24
  • 打赏
  • 举报
回复
//这个返回函数有什么用?他的参数attr_in,value_in上面都没有啊??? //提供串联写法。 css($obj,'left',100)('top',200); // 这个obj有timer属性吗?这是自己定义的嘛?我没看的过这个属性; //obj想要什么属性就有什么属性。 // 这个函数最后两个函数有什么用??? //回调函数,可以说是由自定义事件触发的函数。 //这行代码完全看不懂 //看不懂就搜下 call apply
zhjdg 2013-11-24
  • 打赏
  • 举报
回复
.widget-move {
	width:100px;
	height:100px;
	background-color:#aa5;
	position:absolute;
	top:80px;
	left:20px;
}
<div id='click'>click</div>
	<div id='fn-callback' >fn-callback</div>
	<div id='fn-during'>fn-During</div>

	<div class='widget-move' id='m1'>widget-move</div>
var $obj = document.getElementById("m1");
		var $oTarget = {left:500,top:300};
		var $fnCallBack = function(){
			document.getElementById("fn-callback").innerText = 'this is finish callback function';
		}
		var i=0;
		var $fnDuring = function(){
			i++
			document.getElementById("fn-during").innerText = '---' + i +  '--- this is during callback function should change in step';
		}
		
		document.getElementById("click").onclick =function() {
		miaovStartMove($obj,$oTarget,1,$fnCallBack,$fnDuring);
		}

87,991

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧