5

更新:效果很好。剩下的最后一件事是试图滑过我似乎无法弄清楚的 div 。


更新:我已经设法用转换插件做到了。仍然存在一个问题:当文本在框中滑动时,我可以看到它是如何从外部进入框的。点击这里看看我的意思。


我想使用 jQuery (top -> flash, bottom -> jquery) 来实现这个 flash 效果,这样它就可以在 iphone 和智能手机上查看。

目前,我无法让文本从这些框下方滑入。

HTML 代码:

<div id="banner">
    <div>
        <img src="img/banner-1.jpg" class="banner-bg" />
        <div class="left"></div>
        <div class="left-text"><span>POLISHED FLOORS1</span></div>
        <div class="right"></div>   
        <div class="right-text"><span>Custom-made, elegant and long lasting.</span></div>
    </div>
    <div>
        <img src="img/banner-2.jpg" class="banner-bg" />
        <div class="left"></div>
        <div class="left-text"><span>POLISHED FLOORS2</span></div>
        <div class="right"></div>   
        <div class="right-text"><span>Custom-made, elegant and long lasting.</span></div>
    </div>
    <div>
        <img src="img/banner-3.jpg" class="banner-bg" />
        <div class="left"></div>
        <div class="left-text"><span>POLISHED FLOORS3</span></div>
        <div class="right"></div>   
        <div class="right-text"><span>Custom-made, elegant and long lasting.</span></div>
    </div>
</div>

jQuery代码:

$(document).ready(function(){   
    //$("#banner .left").transition({opacity: "1", width: "238px"}, 1200);
    //$("#banner .right").transition({opacity: "0.7", width: "662px"}, 1200);
    //$("#banner .left-text").delay(1200).transition({ opacity: '1', x: '-220px' });
    //$("#banner .right-text").delay(1200).transition({ opacity: '1', x: '+642px' });

    $(function(){
        $ds = $('#banner div .banner-bg');
        $ds.hide().eq(0).show();
        setInterval(function(){
                $ds.filter(':visible').fadeOut(function(){
                        var $banner_bg = $(this).next('div .banner-bg');
                        var $left = $(this).next('div .left');
                        var $right = $(this).next('div .right');
                        var $left_text = $(this).next('div .left-text');
                        var $right_text = $(this).next('div .right-text');
                        if ( $banner_bg.length == 0 ) {
                            $ds.eq(0).fadeIn();
                        } else {
                            $left.transition({opacity: "1", width: "238px"}, 1200);
                            $right.transition({opacity: "0.7", width: "662px"}, 1200);
                            $left_text.delay(1200).transition({ opacity: '1', x: '-220px' });
                            $right_text.delay(1200).transition({ opacity: '1', x: '+642px' });
                            $banner_bg.fadeIn();
                        }
                });
        }, 5000);
    });
});  

CSS 代码:

#banner {
    height:299px;
    width:900px;
    position:relative;
    overflow:hidden;
}
#banner .banner-bg {
    z-index:0;
    position:absolute;
    top:0;
    left:0;
}
#banner .left {
    float:left;
    width:0px;
    height:100px;
    background:url(img/banner-left-bg.png);
    opacity:0.3;
    position:relative;
    z-index:7;
}
#banner .right {
    float:right;
    width:0px;
    height:100px;
    background-color:#34515c;
    opacity:0.3;
    position:relative;
    z-index:5;
}
#banner .left-text, #banner .right-text {
    font-family:Verdana, Arial;
    font-size:22px;
    font-style:normal;
    color:#fff;
    top:35px;
}
#banner .left-text {
    position:absolute;
    left:233px;
    opacity:0;
    z-index:8;
}
#banner .right-text {
    position:absolute;
    right:662px;
    width:630px;;
    font-size:24px;
    opacity:0;
    z-index:6;
}

有什么建议么?

4

2 回答 2

7

我为您的在线标记创建了一个jsFiddle

解决方案是z-index为左边的文本块设置一个值,即.left.left-text覆盖传入的动画。

编辑:对于您的问题中列出的第二次更新,我看到您的在线 HTML 和在线 jQuery 与您在此处列出的方法完全不同。我知道你的目标是什么,但你的标记到处都缺少很多东西,但你走在正确的道路上。

我建议使用许多免费的幻灯片插件之一,这些插件可以与您独特的带有动画的横幅文本相结合。在此处查看s3Slider DEMO。这些横幅文本框可以换成您自己的漂亮版本。s3Slider主页这里

状态:最后,一个 jsFiddle 使用经过大量修改的 s3Slider jQuery 插件重新创建 Flash 效果,该插件也使用 jsLint 进行验证。我在那个 Demo 中有很多评论。

链接:   jsFiddle 演示(2012 年 12 月 26 日更新)

为了获得灵感,这里有一些看起来相同的 CSS3 广告与 Flash 广告的webkit 示例。猜猜哪个!

于 2012-06-04T04:17:53.923 回答
3

听起来像是#banner需要overflow: hidden;

于 2012-06-04T03:02:34.080 回答