자바스크립트 모션 프레임워크의 코드 공유 예시

div에 테두리 추가, 테두리: 1px 단색 검정색

window.onload = function(){
var div = document.getElementById('div1');

div.onclick = function(){
setInterval( 함수(){
              div.style.width = div.offsetWidth-1+'px'
                                                      ~                                      ? 오히려 늘어난 이유는 무엇일까요?

오프셋 계열 속성에 이러한 문제가 있는 것으로 나타났습니다. 아래에서 수정해 보겠습니다.

1. currentStyle은 현재 스타일이지만 Google 및 Firefox와 호환되지 않습니다.

2. getCompulatedStyle은 계산된 스타일이며 ie8과 호환되지 않음 --

구체적인 코드는 다음과 같습니다.

전달된 매개변수 obj는 획득한 개체를 참조하고 이름은 스타일 속성입니다

function getStyle(obj,name){

                                                   > 밖으로                      obj를 반환합니다. )[name];//IE8과 호환되지 않음--

}

}

다음 단계는 이동 기능을 발전시키는 것입니다.

시작 거리를 var start = obj.offsetLeft;로 변경해야 합니다. parseFloat(getStyle(obj,name));

getStyle(obj,name)은 문자열을 가져오므로 유형을 변환하려면parseFloat를 사용해야 합니다

구체적인 코드는 다음과 같습니다

이전에 투명도를 사용하여 페이드 인 및 아웃하는 방법도 배웠습니다. 어떻게 해야 하나요?

우선 불투명도 속성이 있는지 확인해야 합니다. 그렇다면 투명도는 소수이므로 투명도 * 100을 사용해야 합니다. 그렇지 않으면 계속 기본값을 사용합니다.

if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{

obj.style [name] = cur +'px';

}

위 코드는 한 방향으로만 이동할 수 있는데 500도 아래로 먼저 내려가고 왼쪽 100도 가려고 합니다. 어떻게 할까요?

이전에 콜백 함수에 대해 배운 적이 있는데 그 사람에게 콜백 함수를 전달하면 괜찮을까요?

목적지로 이동할 때 콜백 기능이 있는지 확인해보세요. 있으면 실행되고, 없으면 실행되지 않습니다.

구체적인 코드는 다음과 같습니다

window.onload = function(){

var oDiv = document.getElementById('div1');

var 타이머;

function getStyle(obj,name){

//currentStyle: the 현재 스타일

if(obj.currentStyle){

return obj.currentStyle[name];//Google 및 Firefox와 호환되지 않음

}else{

//getCompulatedStyle: 계산된 스타일

return getCompulatedStyle(obj,false)[name]; // IE8과 호환되지 않습니다--
}
}
function move(obj,name,target,dur,fn){
var count =parseInt(dur/30);//총 횟수
var start = parseFloat( getStyle(obj,name ));//시작으로부터의 거리
var dis = target - start;//Distance
// 단계 크기
// var step =dis/count;
var n = 0;//현재 개수 steps

timer = setInterval (function(){
n++;
var cur = start + n*dis/count;
if(name == 'opacity'){
obj.style[name] = cur;
obj. style.filter = 'alpha ('+cur*100+')';
}
obj.style[name] = cur +'px';
if(n == count){
clearInterval(timer)
fn && fn();
}

},30)
}

oDiv.onclick = 기능(){

move(oDiv,'top',500,3000,function(){
move(oDiv,'left',100,500);
})
}
}

待续.....

위 내용은 자바스크립트 모션 프레임워크의 코드 공유 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!