jQuery小型浪漫婚礼祝福特效
jQuery小型浪漫婚礼祝福特效，我们设置了多个不同的浪漫小场景,由一步步动画完成。
源码介绍
HTML
class="box">
class="first-box">
class="first-horn">
src="images/first_horn.jpg" />
HTML
class="box">
class="first-box">
class="first-horn">
src="images/first_horn.jpg" />
class="mask">
class="pop-box">
>送上祝福语
id="write">写上您的祝福吧~
var $firstHorn = $(".first-horn"),
/* 场景一左边喇叭 */
$firstTxt = $(".first-txt"),
/* 场景一文字div */
firstTxtWidth = $firstTxt.width(),
/* 文字div的宽度 */
$secondBox = $(".second-box"),
/* 场景二box */
$secondPeople = $(".second-people"),
/* 场景二左边人物 */
$secondTxt = $(".second-txt"),
/* 场景二右边文字 */
$threeBox = $(".three-box"),
/* 场景三box */
$threeImg = $(".three-img"),
/* 场景三图片 */
$foreBox = $(".fore-box"),
/* 场景四box */
$foreImg = $(".fore-img"),
/* 场景四图片 */
$fiveBox = $(".five-box"),
/* 场景五box */
$fiveImg = $(".five-img"),
/* 场景五中间图片 */
$uEnter = $(".u-enter"),
/* 进入婚礼按钮 */
$sixBox = $(".six-box"),
/* 场景六box */
$sixDiv = $sixBox.find("div"),
/* 场景六里面小块div */
sixDivWidth = $sixDiv.width(),
/* 场景六里面小块div的宽度 */
sixDivHeight = $sixDiv.height(),
/* 场景六里面小块div的高度 */
sixBoxWidth = $sixBox.width(),
/* 场景六宽度 */
sixBoxHeight = $sixBox.height(),
/* 场景六高度 */
$sevenBox = $(".seven-box");
$firstHorn.animate({
left: 0
},
1000);
$firstTxt.animate({
left: "435px"
},
function() {
$firstTxt.fadeIn(1000);
showTxt($firstTxt.find("div:eq(0)"));
/* 显示第一行文字 */
setTimeout(function() {
showTxt($firstTxt.find("div:eq(1)"));
},
3000);
/* 显示第二行文字 */
setTimeout(scene2, 7000);
/* 进入场景二 */
});
function scene2() {
$firstTxt.fadeOut();
$firstHorn.animate({
left: "-422px"
},
function() {
$secondBox.show();
$secondPeople.animate({
left: "0"
});
$secondTxt.animate({
left: "230px"
},
function() {
$secondTxt.fadeIn(1000);
setTimeout(scene3, 2000);
/* 进入场景三 */
});
});
}
其他5个场景请看js/index.js