JS 간단 한 그림 투명도 순환 변화 실현 (그 라 데 이 션)

9529 단어
많은 것 을 찾 았 습 니 다. 모두 100 에서 0 으로 끝 났 습 니 다. 결국 자신 이 고 쳤 습 니 다. 다음은 소스 코드 입 니 다.
div 에 img, js 함수 추가, 완료 (호출), 이름 뒤에 1 을 추가 하 는 것 은 충돌 을 피하 기 위해 서 입 니 다.
 1 DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>       title>
 6 head>
 7 
 8 <body>
 9 <div id="img_eat"  style="opacity:1;">
10     <img src="https://images.cnblogs.com/cnblogs_com/ikaros-521/1529977/o_eat.gif" id="eat" alt="" style="width: 100px;"/>
11 div>
12 body>
13 <script type="text/javascript">
14 window.onload = function(){
15     //        
16     var timer1 = setInterval(colorLiner,20);
17     var val1 = 100;
18     function colorLiner(){
19         var Div = document.getElementById('img_eat');
20         if(val1 >= 0)
21         {
22             Div.style.opacity = val1/100;    
23         }
24         if(val1 < 0)
25         {
26             Div.style.opacity = -val1/100;
27         }
28         if(val1 == -100)// -100   100
29         {
30             val1 = -val1;
31         }
32         val1--;
33     }    
34 }
35 script>
36 html>

좋은 웹페이지 즐겨찾기