<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery层叠文字焦点图切换动画特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="m2usCon2">
<div class="container">
<div class="a-part por ovh about-fo">
<div class="main poa t-f noselect">
<div class="detail por">
<div class="btn poa prev dn m2usBtnL"></div>
<div class="btn poa next m2usBtnR"></div>
<div class="in por">
<div class="box poa" style="transform: translate(0px, -96px) scale(0.55, 0.55); opacity: 0.08;">
<div class="box-in dn">
<div class="time"></div>
<p></p>
</div>
</div>
<div class="box poa" style="transform: translate(0px, -64px) scale(0.7, 0.7); opacity: 0.2;">
<div class="box-in dn">
<div class="time"></div>
<p></p>
</div>
</div>
<div class="box poa" style="transform: translate(0px, -32px) scale(0.85, 0.85); opacity: 0.4;">
<div class="box-in dn">
<div class="time"></div>
<p></p>
</div>
</div>
<div class="box poa" style="display: block; opacity: 1; top: 0px;">
<div class="box-in dn">
<div class="time"></div>
<p></p>
</div>
</div>
</div>
</div>
<div class="list f-cb por ovh">
<ul class="por">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.transit.js"></script>
<script src="js/bocfe.js"></script>
<script language="javascript">
$(function(){
var Year = new Array(
[
["", "要使整个人生都过得舒适、愉快，这是不可能的，因为人类必须具备一种能应付逆境的态度。——卢梭"]
],
[
["", "重复别人所说的话，只需要教育；而要挑战别人所说的话，则需要头脑。——玛丽·佩蒂博恩·普尔"]
],
[
["", "人生就是学校。在那里，与其说好的教师是幸福，不如说好的教师是不幸。——海贝尔"]
],
[
["", "对一个人来说，所期望的不是别的，而仅仅是他能全力以赴和献身于一种美好事业。——爱因斯坦"]
],
[
["", "心如镜，虽外景不断变化，镜面却不会转动，这就是一颗平常心，能够景转而心不转。"]
],
[
["", "一份耕耘，一份收获，付出就有回报永不遭遇过失败，因我所碰到的都是暂时的挫折。"]
]
)
_PreLoadImg([
"images/m2yy_btn.png"
],function(){
// 初始化
$(".a-part").each(function(){
$(this).height(420)
FullBg($(this), $(this).find("img.bg"))
})
// ABOUT PART FOURTH
$(".about-fo .main").css("top", ($(window).height() - 572) / 2 )
$(".about-fo .box").each(function(){
$(this).find(".box-in").css("padding-top", 138 - $(this).find(".box-in").height() / 2 )
})
var $In = $(".about-fo .detail .in"),
InBl = true,
a = 0,
b = 0,
$FoUl = $(".about-fo .list ul"),
$FoLi = $(".about-fo .list li")
$FoUl.width($FoLi.width() * $FoLi.length)
$FoLi.eq(0).addClass("cur")
var cura = $(".about-fo .list li.cur").index()
$(".about-fo .box:last .box-in .time").html(Year[cura][0][0]).siblings().html(Year[cura][0][1])
$(".about-fo .box:last .box-in").show().css("padding-top", 138 - $(".about-fo .box:last .box-in").height() / 2 )
$(".about-fo .next").click(function(){
$(".about-fo .prev").stop().fadeIn(500);
if(!InBl){
return
}
InBl = false;
if(a == Year.length){
InBl = true
b = Year[a - 1].length
return
}
b ++ ;
if(b == Year[a].length){
b = 0
a ++
if(a > 4 && a < Year.length){
$FoUl.stop().animate({marginLeft: - 166 * (a - 4)}, 500)
}
$FoLi.eq(a).addClass("cur").siblings().removeClass("cur")
}
if(a == Year.length - 1 && b == Year[a].length - 1){
$(this).stop().fadeOut(500);
}
if(a == Year.length){
InBl = true
return
}
var $list = '<div class="box poa dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
$In.find(".box").eq(0).before($list)
$In.find(".box").eq(0).css({
y : -96,
scale : 0.55,
opacity : 0.08
})
$In.find(".box").eq(4).stop().animate({
top : 26,
opacity : 0
}, 500).prev().stop().transition({
y : 0,
scale : 1,
opacity : 1
}, 500).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
$In.find(".box").eq(3).find(".box-in").css("padding-top", 88 - $In.find(".box").eq(3).find(".box-in").height() / 2)
$In.find(".box").eq(2).stop().transition({
y : -32,
scale : 0.85,
opacity : 0.4
}, 500).prev().stop().transition({
y : -64,
scale : 0.7,
opacity : 0.2
}, 500).prev().stop().fadeIn(500, function(){
$In.find(".box").eq(4).remove()
InBl = true
})
})
$(".about-fo .prev").click(function(){
$(".about-fo .next").stop().fadeIn(500);
if(!InBl){
return
}
InBl = false;
if(a == 0 && b == 0){
InBl = true;
return
}
if(a == Year.length){
a --
b --
}
b --
if(a == 0 && b == 0){
$(this).stop().fadeOut(500);
}
if(b == - 1 ){
if(a > 0){
a --
if(a >= 4){
$FoUl.stop().animate({marginLeft: - 166 * (a - 4)}, 500)
}
$FoLi.eq(a).addClass("cur").siblings().removeClass("cur")
}
b = Year[a].length - 1
}
var $list = '<div class="box poa fif dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
$In.find(".box:last").after($list)
$In.find(".box").eq(0).stop().fadeOut(500).next().stop().transition({
y : - 96,
scale : 0.55,
opacity : 0.08
}, 500).next().stop().transition({
y : -64,
scale : 0.7,
opacity : 0.2
}, 500).next().stop().transition({
y : -32,
scale : 0.85,
opacity : 0.4
}, 500).next().stop().fadeIn(600).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
$In.find(".box").eq(4).stop().animate({
top : 0,
opacity : 1
}, 500, function(){
$In.find(".box:first").remove()
$In.find(".box").eq(3).siblings().find(".box-in").hide().find(".time").html("").siblings().html("")
InBl = true
}).find(".box-in").css("padding-top", 88 - $In.find(".box").eq(4).find(".box-in").height() / 2)
})
$FoLi.click(function(){
if(!InBl){
return
}
InBl = false;
var n = $(".about-fo .list li.cur").index()
$(this).addClass("cur").siblings().removeClass("cur")
a = $(this).index(),
b = 0
if($(this).index() < 5){
$FoUl.stop().animate({marginLeft: 0}, 500)
}
if($(this).index() != 0){
$(".about-fo .prev").stop().fadeIn(500);
}else{
$(".about-fo .prev").stop().fadeOut(500);
}
if($(this).index() > n){
var $list = '<div class="box poa dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
$In.find(".box").eq(0).before($list)
$In.find(".box").eq(0).css({
y : -96,
scale : 0.55,
opacity : 0.08
})
$In.find(".box").eq(4).stop().animate({
top : 26,
opacity : 1
}, 500).prev().stop().transition({
y : 0,
scale : 1,
opacity : 1
}, 500).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
$In.find(".box").eq(3).find(".box-in").css("padding-top", 88 - $In.find(".box").eq(3).find(".box-in"
jQuery层叠文字焦点图切换动画特效.zip （8个子文件） 
js 
jquery.transit.js 8KB bocfe.js 3KB jquery.easing.1.3.js 8KB jquery.js 94KB css style.css 41KB
index.html 10KB images 
m2yy_btn.png 1KB m2yyLine.png 1KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5852
