JavaScript 모션 프레임워크 - 체인 모션에서 완벽한 모션까지의 샘플 코드 (5)
- 黄舟원래의
- 2017-05-21 13:25:421297검색
이 글은 JavaScriptMotionFramework의 다섯 번째 부분을 주로 소개하며, 체인 모션부터 완벽한 모션까지, 관심 있는 친구들이 참고할 수 있습니다. >
이번 글에서는 이전 글의 모션 프레임워크를 바탕으로 모션 이후의 모션을 이어가는 체인 모션을 주로 설명합니다. 예를 들어 많은 웹사이트에서는 상자 모양과출구가 나옵니다. : 나올 때는 넓어졌다가 높아졌다가 나갈 때는 짧아졌다가 좁아진다! 이전
모델은 다음과 같습니다:
startMove(obj, json);
startMove(obj, json, fn);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运动框架(五)：链式运动到完美运动</title>
<style type="text/css">
p {
width: 100px;
height: 100px;
background: orange;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var op = document.getElementById('p1');
op.onmouseover = function() {
startMove(op, {width:300,opacity:30}, function() {
startMove(op, {height:500});
});
};
op.onmouseout = function() {
startMove(op, {height:100}, function() {
startMove(op, {width:100,opacity:100});
})
};
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, null)[attr];
}
}
function startMove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var bStop = true;
for (var attr in json) {
var cur = 0;
if (attr === 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
if (cur != json[attr]) {
bStop = false;
}
var speed = (json[attr] - cur)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
cur += speed;
if (attr === 'opacity') {
obj.style.filter = 'alpha(opacity:' + cur + ')';
obj.style.opacity = cur/100;
} else {
obj.style[attr] = cur + 'px';
}
}
if (bStop) {
clearInterval(obj.timer);
if (fn) fn();
}
}, 30);
}
</script>
</body>
</html>를 계속해서 재생할 수 있습니다. 최종 추출된 완벽 모션 프레임은 다음과 같습니다. 아아아아위 내용은 JavaScript 모션 프레임워크 - 체인 모션에서 완벽한 모션까지의 샘플 코드 (5)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.