JS에서 단일 객체의 투명도를 변경하는 방법

이 글은 주로 단일 객체의 투명도를 변경하는 JS 모션 방법을 소개하고, 페이지 요소 속성을 동적으로 수정하는 관련 운영 기법을 예제 형식으로 분석합니다. 도움이 필요한 친구들은 참고할 수 있습니다

이 기사에서는 단일 객체의 투명도를 변경하는 JS 모션 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

개체의 너비, 높이, 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의 4가지 메소드만 있고 offsetAlpha 메소드는 없습니다.

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

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

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

알파와 다른 목표가 가치가 있으면 타이머를 지우고, 그렇지 않으면 투명성 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>

위 내용은 모두를 위해 편집한 내용입니다. 미래.

관련 기사:

Vue의 감지 시퀀스에 객체의 새로운 속성을 추가하는 방법은 무엇입니까?

jQuery에서 가장자리에서 튀어오르는 애니메이션 효과를 어떻게 얻을 수 있나요?

vue cli webpack에서 sass를 사용하는 방법(자세한 튜토리얼)

jQuery에서 태그 하위 요소의 추가 및 할당 방법 구현

JS에서 난수를 생성하는 방법(자세한 튜토리얼)

JS에서 페이지 색상을 변경하는 방법(자세한 튜토리얼)

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