我如何創建一個很好看的圖像淡入淡出與mootools？

我爲一位攝影師創建了一個網站，他希望在他的照片上有一個很好的淡入淡出效果。我已經排除了閃存作爲解決方案，並希望使用mootools fx的外觀效果。但問題是，當談到JavaScript時，我真的很糟糕。所以，如果任何人都可以給我一個簡單的解決方案，淡入淡出一個單一的圖像onload和圖像加載時，我會很高興。我知道這裏有很多不同的人。但問題是我不知道代碼是如何工作的，即使它是一個完整的解決方案。所以最重要的。如果任何人有時間來解釋每一行代碼，我會感激不盡。謝謝！我如何創建一個很好看的圖像淡入淡出與mootools？

來源

2010-05-20 woobione

一個簡單的淡入肯定是一個可以想到的最簡單的事情：

// set-up an event on the browsers window 
window.addEvents({ 

    // be sure to fire the event once the document is fully loaded 
    load: function(){ 

     // assing 'singleImage' variable to the image tag with the 'image' ID 
     var singleImage = $('image'); 

     // set a bunch of CSS styles to the aforementioned image 
     singleImage.set('styles', { 
      'opacity': 0, 
      'visibility': 'visible' 
     }); 

     // fade in the image 
     singleImage.fade('in'); 
    } 
});

工作例如：http://jsfiddle.net/oskar/RNeS5/（HTML，CSS，MooTools的）

來源

2010-05-20 20:17:59

最後我用這對我的網頁之一，但想要控制淡入的長度（我希望它漸漸消失）。是否有一個簡單的變量可以在此方法中設置，以便及時更改淡入淡出？ – MillerMedia 2012-01-29 20:44:36

我如何創建一個很好看的圖像淡入淡出與mootools？

回答

相關問題