이번에는 pictures일정한 속도로 페이드 인 및 아웃되는 js 구현을 가져오겠습니다. js에서 그림을 구현하고 일정한 속도로 페이드 인 및 아웃하기 위한 notes는 다음과 같습니다. 실제 사례를 살펴보겠습니다.
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <title>淡入效果</title> <style> * { margin: 0; padding: 0; } p { border: 2px solid #aaa; } img { width: 300px; height: 300px; filter: alpha(opacity:30); opacity: .3; margin: 0 auto; } </style> </head> <body> <p> <imgsrc="img/timg.jpg"alt=""id="img"> </p> <script> var alpha=30; var img = document.getElementById("img"); img.onmouseover=function(){ startMove(100) }; img.onmouseout=function(){ startMove(30) } var timer; function startMove(tar) { var img = document.getElementById("img"); clearInterval(timer); timer = setInterval(function () { var ispeed=0; ispeed= alpha<tar?5:-5; if(alpha==tar){ clearInterval(timer) } else{ alpha+=ispeed; img.style.filter="alpha(opacity:"+alpha+")"; img.style.opacity=alpha/100; } }, 30) } </script> </body> </html> |
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 js는 그림의 균일한 페이드인과 페이드아웃을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!