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

php中世界最好的语言
풀어 주다: 2018-04-13 10:58:34
원래의
1422명이 탐색했습니다.

이번에는 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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!