기본 js 및 jquery_javascript 기술의 투명도 설정과 관련된 문제

웹사이트의 일상적인 개발에서 투명도 설정 문제가 자주 사용됩니다. 가장 간단한 것은 사진의 페이드 인 및 페이드 아웃 효과입니다. 아래에서는 네이티브 js, jQuery에서 투명도 설정 시 관련 이슈와 주의점을 소개하겠습니다.

1 투명도 스타일 설정
IE 브라우저와 기타 관련 브라우저의 투명도 설정 방법은 동일하지 않습니다. IE는 filter: alpha 속성을 사용하고 Firefox는 opactiy 속성을 사용합니다.
IE: filter: alpha(opacity:30)
firefox: opacity(0.3); 🎜>
2 기본 js에서 투명도 설정
IE 및 기타 브라우저의 투명도 설정과 호환되도록 하려면 위의 두 가지 스타일을 별도로 설정해야 합니다. >
코드 복사

코드는 다음과 같습니다. var alpha = 30; //투명도 값 변수var oDiv = document.getElementById( 'div1'); //DOM 요소 객체 가져오기 oDiv.style.filter = 'alpha(opacity:' alpha ')' //IE의 투명도 설정

oDiv.style.opacity = alpha / 100; //fierfox와 같은 투명도 설정, 투명도 값은 Decimal

3 jQuery 투명도 설정
jQuery는 투명도 설정을 통합했으며 IE 및 기타 브라우저와 호환됩니다. opactiy 속성 값은 10진수이므로 한 번만 설정하면 됩니다.

코드 복사

코드는 다음과 같습니다: $(function(){ $("#div1").css("opacity","0.3"); //투명도 설정 } );

4 예시
예제는 div의 페이드 인 및 페이드 아웃 효과를 구현하기 위해 기본 js를 사용하며, div 영역으로 마우스를 이동할 때 투명도는 100%입니다. 마우스가 div 영역 밖으로 이동하면 투명도는 30%가 되며 투명도 변환 효과를 제어하는 ​​데 시간이 사용됩니다.

코드 복사

코드는 다음과 같습니다. window.onload=function() { var oDiv = document.getElementById('div1');//div의 DOM 객체 가져오기

oDiv.onmouseover = function() //마우스 이동 방법

{ ​​
startMove(100)
}
oDiv.onmouseout = function() //마우스 이동 방법
{
startMove(30);
};

var 타이머 = null; // 시간 객체
var alpha = 30; >function startMove(iTarget)
{
var oDiv = document.getElementById('div1');
clearInterval(timer);//시간 객체 지우기
timer = setInterval(function() {
var 속도 = 0;
if(alpha < iTarget)
{
속도 =5
}
else
{
속도 =
}

if(alpha == iTarget)
{
clearInterval(timer)
}
else
{
alpha =speed; 값 증가 효과
oDiv.style.filter = 'alpha(opacity:' alpha ')'; //IE 투명도 설정
oDiv.style.opacity = alpha / 100; //다른 브라우저 설정
}
},30);
}