jquery ui小型婚礼祝福js特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery ui小型婚礼祝福js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
    <head>
        <title>jquery ui小型婚礼祝福特效</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <link rel="stylesheet" href="css/reset.css"/>
        <link rel="stylesheet" href="css/index.css"/>
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.2.custom.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </head>
    <body>
        <!--[if ie 6]>
        <style type="text/css">
            .mask {position: absolute; height: 800px;}
            .pop-box {_position: absolute;}
        </style>
        <![endif]-->
        <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>
</body>
</html>

JS代码(index.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("请输入祝福语！");
}
}
)}
}
)

CSS代码(index.css):

.box{position:relative;width:960px;height:810px;margin:10px auto;overflow:hidden;}
.second-box,.five-box,.six-box,.seven-box{display:none;}
/* 场景一css */
.first-horn{position:absolute;top:30px;left:-422px;}
.first-txt{position:absolute;top:60px;display:none;}
.first-txt .txt1{width:65px;height:78px;overflow:hidden;}
.first-txt .txt2{width:0;height:78px;overflow:hidden;}
/* 场景二 */
.second-people{position:absolute;left:-286px;}
.second-txt{position:absolute;left:0;top:383px;display:none;}
/* 场景三 */
.three-img{position:absolute;left:-554px;}
/* 场景四 */
.fore-img{position:absolute;top:-518px;left:40px;}
/* 场景五 */
.five-img{position:absolute;top:50px;left:38px;width:885px;height:573px;}
.five-img img{transform:scale(0.4);}
.five-img .u-enter{position:absolute;left:50%;top:250px;margin-left:-73px;padding:10px 30px;border-radius:5px;background:#D05999;font-size:20px;color:white;cursor:pointer;}
/* 场景六 */
.six-box{position:relative;width:960px;height:800px;overflow:hidden;}
.six-box div{position:absolute;width:100px;height:100px;background:url("../images/six_center_img.jpg") no-repeat;}
/* 场景七 */
.seven-box{position:relative;width:958px;height:800px;background:url("../images/seven_bg.jpg") no-repeat top center;border:1px solid #F4D938;overflow:hidden;}
.clickMe{position:absolute;left:0;bottom:0;width:229px;height:233px;cursor:pointer;text-indent:-99999px;background:url("../images/clickMe.jpg") no-repeat;z-index:9999;}
.seven-content{position:relative;width:790px;height:540px;margin:20px auto;background:#f67b93;border-radius:50px;}
.seven-content div{position:absolute;width:57px;height:52px;padding:15px 5px 5px 10px;background:url("../images/note.png") no-repeat;overflow:hidden;cursor:pointer;z-index:99;}
.seven-content div.note-a1{background-position:0 0;}
.seven-content div.note-a2{background-position:-110px 0;}
.seven-content div.note-a3{background-position:-220px 0;}
.seven-content div.note-a4{background-position:-327px 0;}
.seven-content div.note-a5{background-position:0 -150px;}
.seven-content div.note-a6{background-position:-110px -150px;}
.seven-content div.note-a7{background-position:-220px -150px;}
.seven-content div.note-a8{background-position:-327px -150px;}
.seven-content div.note-a9{background-position:0 -296px;}
.seven-content div.note-a10{background-position:-110px -296px;}
.seven-content div.note-a11{background-position:-220px -296px;}
.seven-content div.note-a12{background-position:-327px -296px;}
.seven-content div.note-1{background-position:-1px -440px;color:#494000;}
.seven-content div.note-2{background-position:-110px -440px;color:#561e67;}
.seven-content div.note-3{background-position:-220px -440px;color:#07516f;}
.seven-content div.note-4{background-position:-329px -440px;color:#652f09;}
.seven-content div.note-5{background-position:0 -550px;color:#6b0f13;}
.seven-content div.note-6{background-position:-110px -550px;color:#034914;}
/* 遮罩层 */
.mask{position:fixed;top:0;left:0;width:100%;height:100%;background:white;opacity:0.4;filter:Alpha(opacity=40);z-index:9999;display:none;}
.pop-box{position:fixed;top:-300px;left:50%;margin-left:-250px;margin-top:-150px;width:500px;height:300px;padding:10px;background:#c52947;border-radius:10px;z-index:99999;}
.pop-box h1{font-size:30px;text-align:center;color:white;margin:5px 0 10px;}
.pop-box textarea{display:block;width:440px;height:140px;padding:10px;margin:20px auto;resize:none;font-size:16px;border-radius:5px;background:white;color:#691323;_margin-left:270px;}
.pop-box .u-sure{margin:auto;width:100px;padding:8px 0;background:#780a1f;border-radius:3px;text-align:center;font-size:18px;color:white;font-weight:bold;cursor:pointer;}

CSS代码(reset.css):

@charset "utf-8";/* CSS Document */
/* 默认值、共用值设置 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,b,fieldset,legend,button,input,textarea,th,td,label{margin:0;padding:0;}
body,button,input,select,textarea{font-size:12px;font-family:'Microsoft Yahei',verdana;font-style:normal;font-stretch:normal;font-size-adjust:none;font-variant:normal;height:25px;}
/* remember to define focus styles! */
:focus{outline:0;}
/*:focus 伪类在元素获得焦点时向元素添加特殊的样式。 */
h1,h2,h3,h4,h5,h6{font-size:100%;}
abbr,acronym{border:0;font-variant:normal;}
address,cite,dfn,em,caption,code,strong,th,var{font-style:normal;font-weight:normal;}
code,kdb,pre,samp{font-family:"Courier New",Courier,monospace;}
ul,ol{list-style-image:none;list-style-position:outside;list-style-type:none;}
fieldset,img{border:0 none;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
/* 向左浮动 */
.fl{float:left;}
.fr{float:right;}
/* 以上全为共用的 */
a{text-decoration:none;}
a:hover{text-decoration:underline;}

附件:下载该文件资源,减少时间成本(增值服务)