Perfect / buffer motion framework in sentence parsing JS (for beginners)

1. Perfect motion frame for beginners , still highly necessary Of , So we need to Make a good analysis .

2. Solid foundation , Try to Don't read the notes 了 , Consolidate and review old knowledge ！

//js Perfect motion frame 
// function ( object ,{style1: The target 1, style2: The target 2},  Exercise time ,  Function after ending the motion )
function startMove(obj, json, time, fn) 
{
    
	clearInterval(obj.iTimer);  // Turn off the timer first 
	var iCur = 0;				// First var One iCur A variable's value , namely style Change to the value of , Change value  
	var iSpeed = 0;             // Again var One iSpeed A variable's value , namely style Changing speed value , Variable speed value 
	obj.iTimer = setInterval(function() // Turn on another self timer 
	{
    
		var iBtn = true;        // Turn on a switch , Give this switch a true Value 
		for(var attr in json)   //for loop , In turn json Array style Value traversal 
		{
    
			var iTarget = json[attr];  // Assign the target value to iTarget
			if(attr == 'opacity')      // If style The value is opacity value 
			{
    						
				iCur = Math.round(css(obj, 'opacity') * 100);//  First call css() Method to get style Value is assigned to iCur Change value , Then take it first *100, And then round it to the nearest whole  
			} 
			else                       // If style The value is other 
			{
    		
				iCur = parseInt(css(obj, attr));// First call css() Method to get style Value is assigned to iCur Change value , Then round it directly 
			}
			iSpeed = (iTarget - iCur) / time; // Sum the target value with iCur The difference of the change value divided by a variable assigned to iSpeed Variable speed value , This variable can control the speed ,time The bigger it is , The longer the change time 
			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);// Then use the conditional expression , Round up the shift value 
			if(iCur != iTarget)  // If the change value does not reach the target value , If the target value is reached, it will not enter the judgment statement 
			{
    
				iBtn = false; // Turn off the switch , Can't turn off the timer , Continue to cycle 
				if(attr == 'opacity') // If style The value is opacity when 
				{
    
					obj.style.opacity = (iCur + iSpeed) / 100;// Of changing objects opacity value 
					obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';// Of changing objects filter value 
				}
				else  // If style The value is other , Like length and width , Location, etc px Of style value 
				{
    
					obj.style[attr] = iCur + iSpeed + 'px'; // Change its style value 
				}
			};
		};
		if(iBtn) // If the switch is true It's on , Just execute the statement 
		{
    
			clearInterval(obj.iTimer); // off timer 
			fn && fn.call(obj); // perform fn function 
		}
	}, 30);
};

      //  How to get the style 
function css(obj, attr) 
{
    
	if(obj.currentStyle)
	{
    
		return obj.currentStyle[attr];
	}
	else 
	{
    
		return getComputedStyle(obj, false)[attr];
	}
};

3. Copy the above code and save it as startMove.js Script files , Import html Just documents .

4. In need of using js In the code , call startMove（） This method , That's all right. . for example ：

window.onload = function () {
    
    //  A box   One button 
    var aDiv = document.getElementById('box');
    var aBtn = document.getElementsByTagName("button")[0];
    //  Button click event 
    aBtn.onclick = function () {
    
       //  Call the perfect motion frame ( Object of action ,{style1: The target 1, style2: The target 2},  Exercise time ,  Function after ending the motion )
        startMove(aDiv,{
    
            left : 500,
            width:1000,
            opacity : 40
        },30,function () {
    
            alert(" The exercise is over ！")
        });
    }
}