JS에서 객체의 투명도를 조작하는 단계에 대한 자세한 설명

이번에는 JS를 사용하여 객체의 투명도를 조작하는 단계에 대해 자세히 설명하겠습니다. JS를 사용하여 객체의 투명도를 조작할 때 주의 사항은 무엇입니까?

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

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

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

질문: 그러면 현재 객체의 투명도를 어떻게 얻나요? ?

var alpha = 30이라는 변수를 직접 정의하면 이 변수가 목표 값과 같은지 판단하여 다음 작업을 계속할 수 있습니다. 알파 및 기타 목표가 가치가 있는 경우

타이머

를 지우고, 그렇지 않으면 투명도 값 alpha

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

를 변경하세요. 전체 코드는 다음과 같습니다:

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

CSS 스타일 부분:

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

js 부분:

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS에서 다중 객체 이동을 구현하는 방법

vue.js 원활한 스크롤 효과를 얻는 단계에 대한 자세한 설명

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