如何在javascript中添加淡化效果

嗨我有一個js代碼，並想知道如何添加淡化效果。在代碼中我有3張圖片。如何在javascript中添加淡化效果

下面是代碼：

<html> 
    <head> 
     <script type="text/javascript"> 
      var image1 = "pic001.png" 
      var image2 = "pic002.png" 
      var image3 = "pic006.png" 
     </script> 
    </head> 


    <!--<body onLoad="slidit()">--> 
     <body> 
     <form name="images"> 
      <!--<img src="pic001.png" name="slide" width="200" height="200" /> --> 
      <img src="pic001.png" name="slide" /> 

      <script> 

       //variable that will increment through the images 
       <!--var step = 1 
       function slideit(){ 
        //if browser does not support the image object, exit. 
        switch(step){ 
         case 1: 
          document.images.slide.src = image1; 
          break; 
         case 2: 
          document.images.slide.src = image2; 
          break; 
         case 3: 
          document.images.slide.src = image3; 
          break; 
        } 
        if (step < 3) { 
         step++ 
        } 
        else { 
         step = 1 
        } 
        //call function "slideit()" every 3.5 seconds 
        setTimeout("slideit()", 3500) 
       } 

       slideit() 


      </script> 


     </form> 
    </body> 
</html>

這是淡化效果的代碼，我不知道在哪裏，我的演示代碼中插入此。你可以幫我嗎？謝謝

function ChangeOpacity(id,msDuration,msStart,fromO,toO) 
{ 
    var element=document.getElementById(id); 
    var opacity = element.style.opacity * 100; 
    var msNow = (new Date()).getTime(); 
    opacity = fromO + (toO - fromO) * (msNow - msStart)/msDuration; 
    if (opacity<0) 
    SetOpacity(element,0) 
    else if (opacity>100) 
    SetOpacity(element,100) 
    else 
    { 
    SetOpacity(element,opacity); 
    element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",1); 
    } 
} 
function FadeIn(id) 
{ 
    var element=document.getElementById(id); 
    if (element.timer) window.clearTimeout(element.timer); 
    var startMS = (new Date()).getTime(); 
    element.timer = window.setTimeout("ChangeOpacity('" + id + "',1000," + startMS + ",0,100)",1); 
} 
function FadeOut(id) 
{ 
    var element=document.getElementById(id); 
    if (element.timer) window.clearTimeout(element.timer); 
    var startMS = (new Date()).getTime(); 
    element.timer = window.setTimeout("ChangeOpacity('" + id + "',1000," + startMS + ",100,0)",1); 
} 
function FadeInImage(foregroundID,newImage,backgroundID) 
{ 
    var foreground=document.getElementById(foregroundID); 
    if (backgroundID) 
    { 
    var background=document.getElementById(backgroundID); 
    if (background) 
    { 
     background.style.backgroundImage = 'url(' + foreground.src + ')'; 
     background.style.backgroundRepeat = 'no-repeat'; 
    } 
    } 
    SetOpacity(foreground,0); 
    foreground.src = newImage; 
    if (foreground.timer) window.clearTimeout(foreground.timer); 
    var startMS = (new Date()).getTime(); 
    foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "',1000," + startMS + ",0,100)",10); 
}

來源

2011-05-02 tintincutes

什麼不行？ – 2011-05-02 12:07:54

使用jquery庫 – jimy 2011-05-02 12:08:05

你需要自己做這個嗎？因爲如果你只是使用像jQuery這樣的框架，它可以爲你節省很多時間：http://api.jquery.com/fadeIn/ – Kevin 2011-05-02 12:08:38

爲什麼不使用jQuery fadein/out..？

來源

2011-05-02 12:12:36 maozet

也許他不想使用圖書館，但自己做？ DIY是學習東西的好方法。 – Zirak 2011-05-02 12:15:36

，因爲我想親自完成並整合到網站上。 – tintincutes 2011-05-02 12:32:58

你並不需要使用funtion，只是純粹的CSS和Javascript

記住添加樣式=「過渡：所有的0.6秒;」

function slideit(){ 

     if (!document.images) 
      return 


     document.getElementById('slide').style.opacity = "0"; 
     setTimeout(function(){ 
      document.getElementById('slide').src = slideimages[step].src; 
      document.getElementById('slide').style.opacity = "1"; 
     },500) 

      if (step<3) 
      step++ 
      else 
      step=1 

      setTimeout(slideit,3500) 



    }

來源

2014-12-24 11:19:04

如何在javascript中添加淡化效果

回答

相關問題