我们设置了7个不同的浪漫小场景,由一步步动画完成。
HTML
<div class="box">
<!-- 场景一 -->
<div class="first-box">
<div class="first-horn">
<img src="images/first_horn.jpg" />
</div>
<div class="first-txt">
<div class="txt1">
<img src="images/first_txt1.jpg" />
</div>
<div class="txt2">
<img src="images/first_txt2.jpg" />
</div>
</div>
</div>
<!-- 场景二 -->
<div class="second-box">
<div class="second-people">
<img src="images/second_people.jpg" />
</div>
<div class="second-txt">
<img src="images/second_txt.jpg" />
</div>
</div>
.......
</div>
送上祝福
<div class="mask"></div>
<div class="pop-box">
<h1>送上祝福语</h1>
<textarea id="write">写上您的祝福吧~
JS定义变量
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
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791