0

我严格限制使用 YUI/Javascript 以及 HTML 和可能的 CSS，只要它与 IE 一起运行。

HTML：

<div id="test" style="visibility:hidden">

                    <p><img src=../../included_files/VGirlMega.png></p>
                    <p><img src=../../included_files/ReVGirlMega.png></p>

</div>

<script src="../../included_files/myjs.js"></script>

Javascript：

window.onload=(function(cback){
    return function(ev){
        cback && cback.call(window,ev);
        YUI().use('transition',function(Y){

            var cntr=1; //seconds
            Y.all('#test p').setStyles({'opacity':0,
                                        'marginTop':'25px',
                                        'background':'none repeat scroll 0 0 #fff',
                                        'fontSize':'21px'}).each(function(nd){

                nd.transition({
                    easing: 'ease-out', //easing method
                    duration: 9, // seconds
                    delay:cntr, //this is our counter to stagger the p tags showing
                    opacity:1 
                });

                cntr+=14.0; //increase the delay by half a second
            });

            Y.one('#test').setStyle('visibility','visible');
        });
    }
})(window.onload);

如您所见，我有人帮我编写了 Javascript，因为我在一个电子学习创作工具中使用它，该工具对哪些有效哪些无效非常具体。当然，图像当前加载一个低于另一个。我在想我可能仅仅因为段落标签就完成了？

我研究了其他人是如何实现这一点的，但是虽然他们通常采用相同的概念，但实现并不相同，需要更多的 css/java。

例如这个小提琴： http: //jsfiddle.net/k9e5f/2/ 在这个线程中找到：过渡期间的jQuery重叠图像（试图进行背景过渡）

如果不重新开始，是否很难适应我所拥有的东西？

ps Jquery 不是这个选项:(

谢谢你的帮助。

4

1 回答 1

1

尝试这个：

HTML：

<div class="images-overlap">
    <img src="http://www.gstatic.com/cf/logo_small_ru.gif" />
    <img src="http://www.google.com.ua/images/icons/product/chrome-48.png" class="align_right"/>
</div>

CSS：

.images-overlap{
    position:relative;
    width:170px;
    background:#fee;
}
.align_right{
    position:absolute;
    right:0;
}

演示：http: //jsfiddle.net/YRSFm/23/

于 2013-08-06T12:15:28.303 回答