45、JavaScript的运动----链式运动----回调函数fn参数的添加

秒速五厘米 2022-09-22 04:58 152阅读 0赞

1、链式运动框架

回调函数

• 运动停止时，执行函数

• 运动停止时，开始下一次运动

2、测试代码

2.1 move.js代码

function getStyle(obj, attr) {
    	if (obj.currentStyle) {
    		return obj.currentStyle[attr];
    	} else {
    		return getComputedStyle(obj, false)[attr];
    	}
    }
    /*
     * 1、取当前属性的数值
     * 2、计算缓冲运动的速度
     * 3、检测停止条件
     * */
    function startMove(obj, attr, iTarget, fn) {
    	clearInterval(obj.timer);
    	obj.timer = setInterval(function() {
    		//1.取当前的值ֵ
    		var iCur = 0;
    
    		if (attr == 'opacity') {
    			iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
    		} else {
    			iCur = parseInt(getStyle(obj, attr));
    		}
    
    		//2.算速度
    		var iSpeed = (iTarget - iCur) / 8;
    		iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    
    		//3.检测停止ֹ		
    		if (iCur == iTarget) {
    			clearInterval(obj.timer);
    			//运动停止，执行回调函数
    			if (fn) {
    				fn();
    			}
    		} else {
    			if (attr == 'opacity') {
    				obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
    				obj.style.opacity = (iCur + iSpeed) / 100;
    			} else {
    				obj.style[attr] = iCur + iSpeed + 'px';
    			}
    		}
    	}, 30)
    }

2.2 html页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    #div1 {width:100px; height:100px; background:red;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="move.js"></script>
    <script>
    window.οnlοad=function ()
    {
    	var oBtn=document.getElementById('btn1');
    	var oDiv=document.getElementById('div1');
    	
    	oBtn.οnclick=function ()
    	{
    		startMove(oDiv, 'width', 300, function (){
    			startMove(oDiv, 'height', 300);
    		});
    	};
    };
    </script>
    </head>
    
    <body>
    <input id="btn1" type="button" value="开始运动" />
    <div id="div1">
    </div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，152人围观）

还没有评论，来说两句吧...

相关阅读

相关 js运动技术--链式运动框架

其原理是函数startMove多了一个参数，这个参数是一个函数，可以在定时器结束时调用。 <!DOCTYPE html> <html> <head>

你的名字/ 2024年02月17日 23:20/ 0 赞/ 70 阅读

相关封装运动函数回掉函数

封装缓动动画回掉函数： <!DOCTYPE html> <html> <head> <title>封装运动函数回掉函数</title>

ゝ一纸荒年。/ 2023年07月05日 05:19/ 0 赞/ 13 阅读

相关 48、JavaScript的运动----无缝运动的实现

1、JavaScript的运动----无缝运动的实现 2、测试代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

蔚落/ 2022年09月22日 04:58/ 0 赞/ 161 阅读

相关 45、JavaScript的运动----链式运动----回调函数fn参数的添加

1、链式运动框架回调函数 • 运动停止时，执行函数 • 运动停止时，开始下一次运动 2、测试代码

秒速五厘米/ 2022年09月22日 04:58/ 0 赞/ 153 阅读

相关 41、JavaScript的运动----运动的终止条件

1、运动终止条件 • 匀速运动：距离足够近 • 缓冲运动：两点重合 (具体上面的一个博客的内容) 2、匀速运动终止的条件 <!DOCTY

ゝ一世哀愁。/ 2022年09月21日 13:09/ 0 赞/ 178 阅读

相关 40、JavaScript的运动----缓冲运动

1、缓冲运动 • 逐渐变慢，最后停止 • 距离越远速度越大 – 速度由距离决定 – 速度 = (目标值 \- 当前值 ) / 缩放系数

曾经终败给现在/ 2022年09月21日 13:07/ 0 赞/ 210 阅读

相关 Javascript运动概念1——缓冲运动、匀速运动、运动框架

概念—— A、运动基础：（1）让div运动起来（2）速度——物体运动的快慢（3）运动中的Bug a、不会停止 b、速度取某些值会无法停止 c、到达位置后再点

以你之姓@/ 2022年07月15日 12:07/ 0 赞/ 235 阅读

相关链式运动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

旧城等待，/ 2022年07月14日 11:19/ 0 赞/ 157 阅读

相关链式运动JavaScript实现

html代码 <div></div> <div></div> <div></div> <div>你这一辈子有没有为别人拼过命</div>

傷城~/ 2022年05月27日 12:30/ 0 赞/ 191 阅读

相关多物体链式运动，多值同时运动

实现函数 / 多物体链式运动，多值同时运动 / function startMove(obj, json, callback){

梦里梦外;/ 2022年05月22日 09:00/ 0 赞/ 221 阅读