更新:效果很好.剩下的最后一件事就是试图滑过那些似乎无法达到figure out的div.
更新:我已经设法用transitions plugin做了.一个问题依然存在:当文本在框中滑动时,我可以看到它是如何从外面进入盒子的. Click here看看我的意思.
我想使用jQuery(top – > flash,bottom – > jquery)来实现this flash effect,因此它可以在iphone和智能手机上查看.
目前,我无法从这些框下方滑入文本.
HTML代码:
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;
}
有什么建议?
最佳答案