jQuery小型浪漫婚礼祝福

收藏

我们设置了7个不同的浪漫小场景,由一步步动画完成。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

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