ちょうきょう666

导航

javascript7图片的淡入淡出 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             #img1{opacity: 0.3;}
 8         </style>
 9         <script>
10             window.onload=function(){
11                 
12                 var oTmg=document.getElementById("img1");
13                 oTmg.onmouseover=function(){
14                     startMove(100);
15                 }
16                 oTmg.onmouseout=function(){
17                     startMove(30);
18                 }
19             }
20             var alpha=30;
21             var timer=null;
22             function startMove(iTarget){
23                 var oTmg=document.getElementById("img1");
24                 clearInterval(timer);
25                 var speed=2;
26                 speed=iTarget>alpha?Math.abs(speed):-Math.abs(speed);
27                 timer=setInterval(function(){
28                     if(iTarget==alpha){
29                         clearInterval(timer);
30                     }else{
31                         alpha+=speed;
32                     }
33                     oTmg.style.opacity=alpha/100;
34                 },30);
35             }
36         </script>
37     </head>
38     <body>
39         <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1970585368,2576171845&fm=26&gp=0.jpg" id="img1" />
40     </body>
41 </html>

 

posted on 2020-12-18 14:24  ちょうきょう666  阅读(102)  评论(0)    收藏  举报