js는 그림의 균일한 페이드인과 페이드아웃을 구현합니다.
- php中世界最好的语言원래의
- 2018-04-19 09:15:252237검색
이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.