jQuery小型浪漫婚礼祝福

来源:https://www.sucaihuo.com/js/302.html 2015-08-21 08:26浏览(1115) 收藏

我们设置了7个不同的浪漫小场景,由一步步动画完成。
jQuery小型浪漫婚礼祝福
分类:其它特效 > 动画效果 难易:中级
查看演示 下载资源 下载积分: 106 积分

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

评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2