如何使用jQuery实现这种Flash效果?
更新:效果很好剩下的最后一件事是试图从我似乎无法做到的DIV中滑出。如何使用jQuery实现这种Flash效果?,jquery,css,Jquery,Css,更新:效果很好剩下的最后一件事是试图从我似乎无法做到的DIV中滑出。 更新:我已经设法用了。还有一个问题:当文本滑入框中时,我可以看到它是如何从外部进入框中的。明白我的意思 我想使用jQuery(top->flash,bottom->jQuery)实现,这样它就可以在iPhone和智能手机上查看 目前,我无法让文本从这些框下面滑入 HTML代码: <div id="banner"> <div> <img src="img/banner-1
更新:我已经设法用了。还有一个问题:当文本滑入框中时,我可以看到它是如何从外部进入框中的。明白我的意思
我想使用jQuery(top->flash,bottom->jQuery)实现,这样它就可以在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>
$(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);
});
});
#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;
}
CSS代码:
<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>
$(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);
});
});
#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;
}
有什么建议吗?听起来像是#banner
需要溢出:隐藏代码>我为您的在线标记创建了一个
解决方案是为左侧文本块设置一个z-index
值,即.left
和.left text
,以覆盖传入的动画
编辑:对于您问题中列出的第二次更新,我发现您的在线HTML和在线jQuery与您在此处列出的方法完全不同。我知道你的方向,但是你的标记中到处都有很多遗漏,但是你走的是正确的道路
我建议使用许多免费的幻灯片插件中的一个,这些插件可以与您独特的带有动画的横幅文本相结合。看看这里。那些横幅文本框可以替换为您自己的光滑版本。s3Slider主页已关闭
状态:最后,一个JSFIDLE,它使用一个经过大量修改的s3Slider jQuery插件重新创建Flash效果,该插件还使用jsLint进行验证。我在那个演示中有很多评论。
链接:(2012年12月26日更新)
对于灵感,这里有一些CSS3广告与Flash广告看起来相同。猜猜看 尽管您的定制jQuery滑块已经快用完了。这有动画字幕功能,通过它自己的插件。但是+1用于许多jQuery滑块现在缺少的奇特的块动画标题。谢谢链接!我现在正在尝试在幻灯片之间集成fadeIn和fadeOut效果。看看我在回答中制作的JSFIDLE。添加任何库(或激活.animate的jQuery UI)以快速更改可能会更快。很抱歉,忘记更新代码了。我将查看该链接。谢谢在您查看了该网站链接后,我用一个新的JSFIDLE工作示例更新了我的SO答案,该示例演示了这种特殊的flash效果。绝对漂亮!非常感谢你!