이번에는 투명 그라데이션 기능을 구현하는 JS를 가져오겠습니다. JS에서 투명 그라데이션 기능을 구현하는 데 필요한 Notes는 무엇입니까? 다음은 실제 사례입니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS透明度变化效果</title> <style> body{ margin: 0px; padding: 0px; } .redb{ width:200px; height: 200px; background: red; filter:alpha(opacity=30); opacity: 0.3; } </style> </head> <body> <p class="redb" id="opbtn"></p> <script> window.onload = function(){ var opp = document.getElementById("opbtn"); opp.onmouseover = function(){ startMove(100); } opp.onmouseout = function(){ startMove(30); } } var timer = null; var alpha = 30; var speed = 0; function startMove(opTarget){ clearInterval(timer); var opp = document.getElementById("opbtn"); timer = setInterval(function(){ if(alpha<opTarget){ speed = 10; } else if(alpha>opTarget){ speed = -10; } if(alpha==opTarget){ clearInterval(timer); } else{ alpha += speed; opp.style.opacity = alpha/100; opp.style.filter = 'alpha(opacity='+alpha+')'; } },100); } </script> </body> </html>
요약:
1. 필터와 불투명도의 차이점: w3c 표준 투명도는 불투명이며, 필터는 IE에서만 사용할 수 있으며, 다른 브라우저는 불투명도를 지원합니다
2. offsetLeft 와 유사한 메소드이므로 별도로 변수를 생성해야 합니다
3. timer 를 타이머에 할당하는 것을 잊지 마세요
이 기사의 사례를 읽은 후 메소드를 마스터했다고 믿습니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 보세요!
추천 도서:
jQuery는 주기 시간 자동 변경 스타일 기능을 만듭니다
위 내용은 JS는 투명도 그라디언트 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!