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

最新推荐文章于 2020-05-13 14:24:21 发布

Bwz_Learning

最新推荐文章于 2020-05-13 14:24:21 发布

阅读量508

点赞数

分类专栏： JavaScript_Bak 文章标签： JavaScript的运动 Javascript JavaScript的缓冲运动

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51775003

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 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>

Bwz_Learning

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
45、JavaScript的运动----链式运动----回调函数fn参数的添加

1、链式运动框架回调函数 • 运动停止时，执行函数 • 运动停止时，开始下一次运动2、测试代码 2.1 move.js代码function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else
复制链接

扫一扫