JavaScript 다중 객체 모션 구현 방법 분석_javascript 기술
- WBOY원래의
- 2016-05-16 15:21:011566검색
이 기사의 예에서는 JavaScript의 다중 객체 이동 구현 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
여기서 주의해야 할 점: 각 이동 객체의 타이머는 객체의 속성으로 독립적이며 서로 영향을 미치지 않습니다. 속성은 이동 객체에 바인딩되어 있을 수 없습니다. 을 공유했습니다.
런닝 효과 스크린샷은 다음과 같습니다.
예:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多物体运动</title>
<style>
div{ width:100px; height:100px; background:red; float:left; margin:10px; border:1px solid black; opacity:0.3; filter:alpha(opacity=30);}
</style>
<script>
window.onload = function()
{
var aDiv = document.getElementsByTagName('div');
aDiv[0].onmouseover = function()
{
startMove(this, 'width', 300);
};
aDiv[0].onmouseout = function()
{
startMove(this, 'width', 100);
};
aDiv[1].onmouseover = function()
{
startMove(this, 'height', 300);
};
aDiv[1].onmouseout = function()
{
startMove(this, 'height', 100);
};
aDiv[2].onmouseover = function()
{
startMove(this, 'opacity', 100);
};
aDiv[2].onmouseout = function()
{
startMove(this, 'opacity', 30);
};
aDiv[3].onmouseover = function()
{
startMove(this, 'borderWidth', 20);
};
aDiv[3].onmouseout = function()
{
startMove(this, 'borderWidth', 1);
};
};
function getStyle(obj, attr)
{
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, attr, iTarget)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var iCur = 0;
if(attr == 'opacity'){
iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
}else{
iCur = parseInt(getStyle(obj, attr));
}
var iSpeed = (iTarget - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur == iTarget){
clearInterval(obj.timer);
}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);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
JavaScript 모션 효과와 관련된 더 많은 콘텐츠를 보려면 이 사이트의 특별 주제인 " JavaScript 모션 효과 및 기술 요약"
을 참조하세요.이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.