JS 모션으로 단일 객체의 투명도를 변경하는 방법 분석

이 글은 주로 단일 객체의 투명도를 변경하는 JS 이동 방법을 소개하고, 페이지 요소 속성의 동적 수정과 관련된 JS 작업 기술을 예제 형식으로 분석합니다. JavaScript에 관심이 있는 친구들은 참고할 수 있습니다. 이 글

객체의 이동 효과를 얻기 위해 객체의 너비, 높이, letf, 위쪽 위치 또는 이동 방향을 변경하는 것 외에도 객체의 투명도를 변경하는 것도 특별한 이동 효과입니다

<script>
  window.onload = function () {
    var op = document.getElementById(&#39;p1&#39;);
    op.onmousemove = function () {
      startMove(100);
    }
    op.onmouseout = function () {
      startMove(30);
    }
}
var timer = null;
function startMove(iTarget) {
    clearInterval(timer);
    var op = document.getElementById(&#39;p1&#39;);
    timer = setInterval(function(){
      if(op.offsetAlpha == iTarget){
        ....
      }
    },30);
}
</script>

하지만 js에는 offsetLeft/Top, offsetWidth/Height의 네 가지 메서드만 있고 offsetAlpha 메서드는 없습니다.

Q: 그러면 현재 개체의 투명도를 어떻게 얻나요? ?

변수 var alpha = 30을 정의할 수 있습니다. 이 변수가 목표 값과 같은지 판단하여 다음 작업을 계속할 수 있습니다.

var alpha = 30; // 自定义一个变量

알파와 다른 목표가 가치가 있으면 timer를 지우고, 그렇지 않으면 변경합니다. 투명도 값 alpha

if(alpha == iTarget){
   clearInterval(timer);
}else{
   alpha += iSpeed;
   op.style.opacity = alpha/100;
   op.style.filter = 'alpha(opacity:'+alpha+')';
}

완전한 코드는 다음과 같습니다.

<p id="p1"></p>

css 스타일 부분:

<style>
    #p1{
      width: 100px;height: 100px;
      background: green;
      opacity:0.3;
      filter:alpha(opacity:30);/*兼容低版本IE*/
    }
</style>

js 부분:

<script>
  window.onload = function () {
    var op = document.getElementById(&#39;p1&#39;);
    op.onmousemove = function () {
      startMove(100);
    }
    op.onmouseout = function () {
      startMove(30);
    }
  }
  var timer = null;
  var alpha = 30;
  function startMove(iTarget) {
    clearInterval(timer);
    var op = document.getElementById(&#39;p1&#39;);
    var iSpeed = 0;
    timer = setInterval(function(){
      if(alpha>iTarget){
        iSpeed = -10;
      }else{
        iSpeed = 10;
      }
      if(alpha == iTarget){
        clearInterval(timer);
      }else{
        alpha += iSpeed;
        op.style.opacity = alpha/100;
        op.style.filter = &#39;alpha(opacity:&#39;+alpha+&#39;)&#39;;
      }
    },30);
  }
</script>

위는 이 글의 모든 내용입니다. 모두가 학습하는 데 도움이 되기를 바랍니다! !

관련 권장사항:

js를 플러그인_Canvas 통계 차트 플러그인 작성 예제로 패키지화

html, css, javascript를 사용하여 바닥을 뛰어다니는 페이지 레이아웃 구현

JavaScript 모듈 모드에 대한 자세한 설명

위 내용은 JS 모션으로 단일 객체의 투명도를 변경하는 방법 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!