jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何使用jQuery实现此Flash效果?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
更新:效果很好.剩下的最后一件事就是试图滑过那些似乎无法达到 figure out的div.

更新:我已经设法用transitions plugin做了.一个问题依然存在:当文本在框中滑动时,我可以看到它是如何从外面进入盒子的. Click here看看我的意思.

我想使用jQuery(top – > flash,bottom – > jquery)来实现this flash effect,因此它可以在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",1200);
                            $right.transition({opacity: "0.7",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;
}

有什么建议?

解决方法

我创建了一个 jsFiddle的在线@L_262_12@.

解决方案是为左侧文本块提供z-index值,即.left和.left-text,以便它覆盖传入的动画.

编辑:对于您的问题中列出的第二个更新,我看到您的在线HTML和在线jQuery是一种完全不同于您在此处列出的方法.我看到你的目标在哪里,但你的@L_262_12@中到处都有很多,但是你走的是正确的道路.

我建议使用许多免费幻灯片插件中的一个,它可以与具有动画的独特横幅文本结合使用.看看这里的s3Slider DEMO.这些横幅文本框可以替换为您自己的光滑版本. s3Slider主页是HERE.

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

链接jsFiddle DEMO(12/26/2012更新)

对于灵感,这里有一些webkit examples的CSS3广告与Flash广告看起来相同.猜猜哪个!

大佬总结

以上是大佬教程为你收集整理的如何使用jQuery实现此Flash效果?全部内容,希望文章能够帮你解决如何使用jQuery实现此Flash效果?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。