如何使用mootools创建漂亮的图像fadein onload?

时间:2010-05-20 18:35:45

标签: mootools onload fadein

我正在为一位想要在他的照片上留下精美褪色的摄影师创建一个网站。我已经排除了闪存作为解决方案,并希望使用mootools fx的那些精美效果。但问题是,当涉及到javascript时,我真的很糟糕。所以,如果有人能给我一个简单的解决方案,在单个图像上加载淡入淡出,当图像加载时,我会非常高兴。我知道有很多不同的人有这个。但问题是我不知道代码是如何工作的,即使它是一个完整的解决方案。所以最重要的。如果有人有时间解释每一行代码的作用,我将不胜感激。谢谢!

1 个答案:

答案 0 :(得分:4)

简单的淡入肯定是人们可以想象的最简单的事情:

// 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)