jquery版小型婚禮（可動態添加祝福語） jquery版相片牆（鼠標控制圖片聚合和散開）

時間 2019-12-15

標籤 jquery 小型婚禮動態添加祝福相片鼠標控制圖片聚合散開欄目 JQuery 简体版

原文原文鏈接

　　前兩天在網上不當心看到「js許願牆」這幾個字，個人神經就所有被調動了。而後就開始個人百度生涯，一直尋覓許願牆背景圖片和便利貼圖片，覓了很久……一直沒找到滿意的……無心間看到祝福語和一些卡通婚禮圖片。最終我決定用jquery製做一個小型婚禮，而且實現添加祝福語的功能。css

　　音樂響起來，開始個人婚禮進行曲~html

　　1、婚禮演示圖jquery

　　場景一：app

　　場景二：dom

　　場景三：ssh

　　場景四：ide

　　場景五：post

　　場景六：動畫

　　場景七：this

　　添加祝福語：

　　2、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 class="three-box">
                <div class="three-img">
                    <img src="images/three_img.jpg"/>
                </div>
            </div>

            <!-- 場景四 -->
            <div class="fore-box">
                <div class="fore-img">
                    <img src="images/fore_img.jpg"/>
                </div>
            </div>

            <!-- 場景五 -->
            <div class="five-box">
                <div class="five-img">
                    <img src="images/five_img.jpg"/>
                    <div class="u-enter">進入婚禮</div>
                </div>
            </div>

            <!-- 場景六 -->
            <div class="six-box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>

            <!-- 場景七 -->
            <div class="seven-box">
                <div class="clickMe">點我送祝福</div>
                <div class="seven-content">
                    <div class="note-a1"></div>
                    <div class="note-a2"></div>
                    <div class="note-a3"></div>
                    <div class="note-a4"></div>
                    <div class="note-a5"></div>
                    <div class="note-a6"></div>
                    <div class="note-a7"></div>
                    <div class="note-a8"></div>
                    <div class="note-a9"></div>
                    <div class="note-a10"></div>
                    <div class="note-a11"></div>
                    <div class="note-a12"></div>
                    <div class="note-1">必定要幸福哦~</div>
                    <div class="note-2">祝大家白頭偕老！</div>
                    <div class="note-3">早生貴子~</div>
                    <div class="note-4">新婚快樂~</div>
                    <div class="note-5">生個寶寶認我作乾媽！</div>
                    <div class="note-6">喜結良緣O(∩_∩)O哈哈哈~</div>
                    <div class="note-1">必定要幸福哦~</div>
                    <div class="note-2">祝大家白頭偕老！</div>
                    <div class="note-3">早生貴子~</div>
                    <div class="note-4">新婚快樂~</div>
                    <div class="note-5">生個寶寶認我作乾媽！</div>
                    <div class="note-6">喜結良緣O(∩_∩)O哈哈哈~</div>
                </div>
            </div>
        </div>

        <!-- 遮罩層 -->
        <div class="mask"></div>
        <div class="pop-box">
            <h1>送上祝福語</h1>
            <textarea id="write">寫上您的祝福吧~</textarea>
            <div class="u-sure" id="uSure">肯定</div>
        </div>

　　3、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 showTxt($obj){
        for(var i = 0; i < 8; i++){
            (function(){
                $obj.animate({width: firstTxtWidth*(i+1)+"px"}); /* 根據i值，width逐漸變大 */
            })(i)
        }
    }

　　描述：場景一主要有兩個功能，第一個是控制左邊圖片，第二個是讓右邊文字逐一顯示。

　　場景二：

    /* 場景二 */
    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); /* 進入場景三 */
            });
        });
    }

　　描述：場景二功能簡單一點，只控制左邊人物出現，緊接着是文字顯示。

　　場景三：

    /* 場景三 */
    function scene3(){
        $secondBox.hide();
        $threeBox.fadeIn();
        for(var i = 0; i < 6; i++){ /* 控制圖片跳轉頻率 */
            if(i==0){
                $threeImg.css({left:0,top:0});
            }else if(i%2==0){
                $threeImg.animate({left: 40*i+"px",top: 30*i+"px"},80*(6-i));
            }else{
                $threeImg.animate({left: 40*i+"px",top: "200px"},80*(6-i));
            }
        }
        setTimeout(scene4,2500); /* 進入場景四 */
    }

　　描述：場景三功能控制圖片彈跳顯示，我用for循環控制彈跳距離。

　　場景四：

    /* 場景四 */
    function scene4(){
        $threeBox.hide();
        $foreBox.fadeIn();
        $foreImg.animate({top: "80px"},1000);
        setTimeout(scene5,2500); /* 進入場景五 */
    }

　　描述：場景四控制圖片從頂部往下滑落，停留1秒而後滑向右側直至消失。

　　場景五：

    /* 場景五 */
    function scene5(){
        $foreImg.animate({left: "960px"},function(){
            $fiveBox.fadeIn();
            $fiveBox.find("img").css({"transform": "scale(1)"});
            $uEnter.click(function(){
                $fiveBox.hide();
                setTimeout(scene6,400); /* 進入第六場景 */
            })
        });
    }

　　描述：場景五慢慢顯現，可點擊進入婚禮。

　　場景六：

    /* 場景六 */
    var colCount = 4, /* 多少列 */
        rowCount = 4; /* 多少行 */
    function scene6(){
        $sixBox.fadeIn();
        /* 聚合 */
        $sixDiv.each(function(){
            var _index = $(this).index(),
                col = _index%colCount, /* 第幾列 */
                row = Math.floor(_index/rowCount), /* 第幾行 */
                cssLeft = sixBoxWidth/2 - colCount/2*sixDivWidth + col*sixDivWidth, /* left的值 */
                cssTop = sixBoxHeight/2 - rowCount/2*sixDivHeight + row*sixDivHeight, /* top的值 */
                divLeft = -col*sixDivWidth, /* 背景定位的寬度 */
                divTop = -row*sixDivHeight; /* 背景定位的高度 */
            $(this).css({"left": cssLeft,"top": cssTop, "background-position": divLeft+"px "+divTop+"px"}); /* 先設置成爲聚合，定位好背景圖片 */
            setTimeout(scatter,1600); /* 調用散開 */
        })
        setTimeout(scene7,3000); /* 進入第七場景 */
    }
    /* 散開 */
    function scatter(){
        $sixDiv.each(function(){
            var _index = $(this).index(),
                col = _index%colCount, /* 第幾列 */
                row = Math.floor(_index/rowCount), /* 第幾行 */
                cssLeft = (col-1)*(sixBoxWidth+sixDivWidth)- sixDivWidth, /* 我這裏的水平間距大小爲盒子大小加上它自身的寬度 */
                cssTop = (row-1)*(sixBoxHeight+sixDivHeight)- sixDivWidth; /* 我這裏的水平間距大小爲盒子大小加上它自身的寬度 */
                $(this).animate({"left": cssLeft,"top": cssTop},1200);
        })
    }

　　描述：場景六顯現停留1.6秒，而後以碎片的形式向外散開，這個代碼解釋和jquery版相片牆（鼠標控制圖片聚合和散開）相似，參考那邊便可。

　　場景七：

  /* 場景七 */
    var $sevenDiv = $(".seven-content div"),
        $clickMe = $(".clickMe"),
        /* 送上祝福 */
        $mask = $(".mask"),
        $popBox = $(".pop-box"),
        $write = $("#write"),
        $uSure = $("#uSure"),
        $sevenContent = $(".seven-content");

    function scene7(){
        $sixBox.hide();
        $sevenBox.fadeIn(1000);
        $sevenDiv.each(function(){
            defineSevenDiv($(this));
        })

        function defineSevenDiv($own){
            var _obj = defineRandom();
            $own.css({"transform":"rotate("+_obj.rotate+"deg)"}); /* 設置隨機旋轉值 */
            $own.animate({left: _obj.left+"px",top: _obj.top+"px"}); /* 隨機排布 */
        }

        /* 定義隨機left，top和旋轉值 */
        function defineRandom(){
            var randomLeft = Math.floor(680*(Math.random())) + 30, /* 圖片left值 */
                randomTop =  Math.floor(400*Math.random()) + 30, /* 圖片top值 */
                randomRotate = 20 - Math.floor(40*Math.random()); /* 圖片旋轉角度 */
            return {
                left: randomLeft,
                top: randomTop,
                rotate:randomRotate
            }
        }

        /* 拖動祝福卡片 */
        draggableNote();
        /* 拖動圖片 */
        function draggableNote(){
            $(".seven-content div").draggable({
                containment: $sevenContent,
                zIndex: 2700,
                start: function(){
                    $(this).css({"transform":"rotate(0deg)","cursor": "crosshair"}); /* 開始拖動圖片旋轉爲0，鼠標樣式改變 */
                },
                stop: function(){
                    var _obj = defineRandom();
                    $(this).css({"transform":"rotate("+_obj.rotate+"deg)","cursor": "pointer"}); /* 中止拖動，旋轉爲隨機的 */
                }
            })
        }

　　描述：場景七祝福貼紙隨機排布，而且可拖動祝福貼紙。

　　添加祝福語：

    /* 點我送祝福 */
        $clickMe.click(function(){
            $write.val("送上您的祝福吧~");
            $mask.fadeIn();
            $popBox.animate({top: "50%"});
        })

        /* 獲取焦點時 */
        $write.focus(function(){
            var _val = $(this).val();
            if(_val == "送上您的祝福吧~"){
                $(this).val("");
            }
        })
        /* 丟失焦點時 */
        $write.blur(function(){
            var _val = $(this).val();
            if(_val.length == 0){
                $(this).val("送上您的祝福吧~");
            }
        })

        /* 點擊肯定 */
        $uSure.click(function(){
            var _writeVal = $write.val();
            var _randomNum = Math.ceil(Math.random()*6);
            if(_writeVal != "送上您的祝福吧~"){
                var _div = '<div class="note-'+_randomNum+'">'+_writeVal+'</div>';
                $sevenContent.append(_div); /* 若是輸入祝福語，將此標籤添加的尾部 */
                defineSevenDiv($sevenContent.find("div:last"));
                $popBox.animate({top: "-300px"},function(){
                    $mask.fadeOut();
                    draggableNote(); /* 可拖動卡片，給新添加的標籤賦予拖動功能 */
                });
            }else{
                alert("請輸入祝福語！");
            }
        })

　　描述：添加祝福語中，需填寫祝福語，不然不讓提交。可提交的祝福語便隨機散佈在祝福牆中，可實現隨意拖動功能。

　　js全部代碼：

/**
 * User: wei ya
 * Date: 14-6-12
 * Time: 下午8:08
 * 小型婚禮
 */
$(function(){
    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 showTxt($obj){
        for(var i = 0; i < 8; i++){
            (function(){
                $obj.animate({width: firstTxtWidth*(i+1)+"px"}); /* 根據i值，width逐漸變大 */
            })(i)
        }
    }

    /* 場景二 */
    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); /* 進入場景三 */
            });
        });
    }

    /* 場景三 */
    function scene3(){
        $secondBox.hide();
        $threeBox.fadeIn();
        for(var i = 0; i < 6; i++){ /* 控制圖片跳轉頻率 */
            if(i==0){
                $threeImg.css({left:0,top:0});
            }else if(i%2==0){
                $threeImg.animate({left: 40*i+"px",top: 30*i+"px"},80*(6-i));
            }else{
                $threeImg.animate({left: 40*i+"px",top: "200px"},80*(6-i));
            }
        }
        setTimeout(scene4,2500); /* 進入場景四 */
    }

    /* 場景四 */
    function scene4(){
        $threeBox.hide();
        $foreBox.fadeIn();
        $foreImg.animate({top: "80px"},1000);
        setTimeout(scene5,2500); /* 進入場景五 */
    }

    /* 場景五 */
    function scene5(){
        $foreImg.animate({left: "960px"},function(){
            $fiveBox.fadeIn();
            $fiveBox.find("img").css({"transform": "scale(1)"});
            $uEnter.click(function(){
                $fiveBox.hide();
                setTimeout(scene6,400); /* 進入第六場景 */
            })
        });
    }

    /* 場景六 */
    var colCount = 4, /* 多少列 */
        rowCount = 4; /* 多少行 */
    function scene6(){
        $sixBox.fadeIn();
        /* 聚合 */
        $sixDiv.each(function(){
            var _index = $(this).index(),
                col = _index%colCount, /* 第幾列 */
                row = Math.floor(_index/rowCount), /* 第幾行 */
                cssLeft = sixBoxWidth/2 - colCount/2*sixDivWidth + col*sixDivWidth, /* left的值 */
                cssTop = sixBoxHeight/2 - rowCount/2*sixDivHeight + row*sixDivHeight, /* top的值 */
                divLeft = -col*sixDivWidth, /* 背景定位的寬度 */
                divTop = -row*sixDivHeight; /* 背景定位的高度 */
            $(this).css({"left": cssLeft,"top": cssTop, "background-position": divLeft+"px "+divTop+"px"}); /* 先設置成爲聚合，定位好背景圖片 */
            setTimeout(scatter,1600); /* 調用散開 */
        })
        setTimeout(scene7,3000); /* 進入第七場景 */
    }
    /* 散開 */
    function scatter(){
        $sixDiv.each(function(){
            var _index = $(this).index(),
                col = _index%colCount, /* 第幾列 */
                row = Math.floor(_index/rowCount), /* 第幾行 */
                cssLeft = (col-1)*(sixBoxWidth+sixDivWidth)- sixDivWidth, /* 我這裏的水平間距大小爲盒子大小加上它自身的寬度 */
                cssTop = (row-1)*(sixBoxHeight+sixDivHeight)- sixDivWidth; /* 我這裏的水平間距大小爲盒子大小加上它自身的寬度 */
                $(this).animate({"left": cssLeft,"top": cssTop},1200);
        })
    }


    /* 場景七 */
    var $sevenDiv = $(".seven-content div"),
        $clickMe = $(".clickMe"),
        /* 送上祝福 */
        $mask = $(".mask"),
        $popBox = $(".pop-box"),
        $write = $("#write"),
        $uSure = $("#uSure"),
        $sevenContent = $(".seven-content");

    function scene7(){
        $sixBox.hide();
        $sevenBox.fadeIn(1000);
        $sevenDiv.each(function(){
            defineSevenDiv($(this));
        })

        function defineSevenDiv($own){
            var _obj = defineRandom();
            $own.css({"transform":"rotate("+_obj.rotate+"deg)"}); /* 設置隨機旋轉值 */
            $own.animate({left: _obj.left+"px",top: _obj.top+"px"}); /* 隨機排布 */
        }

        /* 定義隨機left，top和旋轉值 */
        function defineRandom(){
            var randomLeft = Math.floor(680*(Math.random())) + 30, /* 圖片left值 */
                randomTop =  Math.floor(400*Math.random()) + 30, /* 圖片top值 */
                randomRotate = 20 - Math.floor(40*Math.random()); /* 圖片旋轉角度 */
            return {
                left: randomLeft,
                top: randomTop,
                rotate:randomRotate
            }
        }

        /* 拖動祝福卡片 */
        draggableNote();
        /* 拖動圖片 */
        function draggableNote(){
            $(".seven-content div").draggable({
                containment: $sevenContent,
                zIndex: 2700,
                start: function(){
                    $(this).css({"transform":"rotate(0deg)","cursor": "crosshair"}); /* 開始拖動圖片旋轉爲0，鼠標樣式改變 */
                },
                stop: function(){
                    var _obj = defineRandom();
                    $(this).css({"transform":"rotate("+_obj.rotate+"deg)","cursor": "pointer"}); /* 中止拖動，旋轉爲隨機的 */
                }
            })
        }

        /* 點我送祝福 */
        $clickMe.click(function(){
            $write.val("送上您的祝福吧~");
            $mask.fadeIn();
            $popBox.animate({top: "50%"});
        })

        /* 獲取焦點時 */
        $write.focus(function(){
            var _val = $(this).val();
            if(_val == "送上您的祝福吧~"){
                $(this).val("");
            }
        })
        /* 丟失焦點時 */
        $write.blur(function(){
            var _val = $(this).val();
            if(_val.length == 0){
                $(this).val("送上您的祝福吧~");
            }
        })

        /* 點擊肯定 */
        $uSure.click(function(){
            var _writeVal = $write.val();
            var _randomNum = Math.ceil(Math.random()*6);
            if(_writeVal != "送上您的祝福吧~"){
                var _div = '<div class="note-'+_randomNum+'">'+_writeVal+'</div>';
                $sevenContent.append(_div); /* 若是輸入祝福語，將此標籤添加的尾部 */
                defineSevenDiv($sevenContent.find("div:last"));
                $popBox.animate({top: "-300px"},function(){
                    $mask.fadeOut();
                    draggableNote(); /* 可拖動卡片，給新添加的標籤賦予拖動功能 */
                });
            }else{
                alert("請輸入祝福語！");
            }
        })

    }

})