如何使用 mootools 创建漂亮的淡入淡出图像？

发布于 2024-09-02 11:13:07 字数 239 浏览 9 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

秋风の叶未落 2024-09-09 11:13:07

简单的淡入肯定是人们能想象到的最简单的事情：

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

A simple fade-in is surely the simplest thing one can imagined:

// 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');
    }
});

Working example: http://jsfiddle.net/oskar/RNeS5/ (HTML, CSS, MooTools)

回复收藏 0 原文

~没有更多了~