2.js代码

 
 
  
  
var sceneObject = { 
  
  
    init: function(){ 
  
  
        this._enterCar(); 
  
  
        this._enterInvitation(); 
  
  
        this._enterAlbum(); 
  
  
        this._enterWall(); 
  
  
        this._addBlessing(); 
  
  
        this._searchAddress(); 
  
  
    }, 
  
  
    /*---------------------------------移动的婚车------------------------------*/ 
  
  
    _enterCar: function(){ 
  
  
        initCar(); 
  
  
 
  
  
        /* 婚车随着窗口大小改变 */ 
  
  
        $(window).resize(function(){ 
  
  
            setCarPosition(); 
  
  
        }) 
  
  
    }, 
  
  
    /*---------------------------------进入邀请函------------------------------*/ 
  
  
    _enterInvitation: function(){ 
  
  
         var $home = $(".home"), /* 首页 */ 
  
  
            $toInvitation = $("#to-invitation"), /* 邀请函按钮 */ 
  
  
            $invitation = $(".invitation"), /* 邀请函模块 */ 
  
  
            $invitationCt = $(".invitation-content"), /* 邀请函内容 */ 
  
  
            $inviteReturn = $("#invite-return"); 
  
  
 
  
  
        $toInvitation.click(function(){ 
  
  
            $home.fadeOut(); /* 隐藏首页 */ 
  
  
            $invitation.fadeIn(); 
  
  
            $invitationCt.animate({"top": "0"},function(){ 
  
  
                $inviteReturn.fadeIn(); 
  
  
            }); 
  
  
        }) 
  
  
         
  
  
        /* 邀请函中点击返回按钮 */ 
  
  
        $inviteReturn.click(function(){ 
  
  
            $invitationCt.css({"top": "-540px"}); 
  
  
            $invitation.fadeOut(function(){ 
  
  
                $inviteReturn.fadeOut(); 
  
  
                $home.fadeIn(600); 
  
  
            }); 
  
  
        }) 
  
  
    }, 
  
  
     /*---------------------------------进入相册------------------------------*/ 
  
  
    _enterAlbum: function(){ 
  
  
        var $home = $(".home"), /* 首页 */ 
  
  
             $toPicture = $("#to-picture"), 
  
  
             $pictureWall = $(".picture-wall"), 
  
  
             timer; 
  
  
 
  
  
        $toPicture.click(function(){ 
  
  
            $home.fadeOut(function(){/* 隐藏首页 */ 
  
  
                $pictureWall.fadeIn(); /* 显示相册 */ 
  
  
                autoPicWall(); 
  
  
                timer = setInterval(autoPicWall,4000); /* 照片自动播放 */ 
  
  
            }); 
  
  
        }) 
  
  
 
  
  
        /* 点击照片墙中返回按钮 */ 
  
  
        $("#picture-return").click(function(){ 
  
  
            clearInterval(timer); /* 返回首页时清除循环 */ 
  
  
            picPage = 0; /* 并且显示图片为0，也就是下一次进入时又从0开始 */ 
  
  
            $pictureWall.fadeOut(function(){ 
  
  
                $home.fadeIn(); 
  
  
            }) 
  
  
        }) 
  
  
    }, 
  
  
     /*---------------------------------进入祝福墙-------------------------------*/ 
  
  
    _enterWall: function(){ 
  
  
        var $home = $(".home"), 
  
  
                $uEnter = $("#to-wall"); /* 进入祝福墙按钮 */ 
  
  
                 
  
  
 
  
  
        $uEnter.click(function(){ 
  
  
            $home.hide(); 
  
  
            setTimeout(scene6,400); /* 进入祝福墙场景动画 */ 
  
  
        }) 
  
  
    }, 
  
  
    /*---------------------------------添加祝福语-------------------------------*/ 
  
  
    _addBlessing: function(){ 
  
  
           var $home = $(".home"), 
  
  
                $sevenDiv = $(".seven-content div"), 
  
  
                $clickMe = $(".clickMe"), 
  
  
                $mask = $(".mask"), 
  
  
                $popBox = $(".pop-box"), 
  
  
                $write = $("#write"), 
  
  
                $uSure = $("#uSure"), 
  
  
                $sevenContent = $(".seven-content"); 
  
  
 
  
  
        /* 拖动祝福卡片 */ 
  
  
        draggableNote(); 
  
  
 
  
  
         /* 点我送祝福 */ 
  
  
        $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(), 
  
  
                 _randomNum = Math.ceil(Math.random()*6); 
  
  
 
  
  
            if(_writeVal != "送上您的祝福吧~"){ 
  
  
                var _div = ''+_writeVal+''; 
  
  
                $sevenContent.append(_div); /* 如果输入祝福语，将此标签添加的尾部 */ 
  
  
                defineSevenDiv($sevenContent.find("div:last")); 
  
  
                $popBox.animate({top: "-300px"},function(){ 
  
  
                    $mask.fadeOut(); 
  
  
                    draggableNote(); /* 可拖动卡片，给新添加的标签赋予拖动功能 */ 
  
  
                }); 
  
  
            }else{ 
  
  
                alert("请输入祝福语！"); 
  
  
            } 
  
  
        }) 
  
  
 
  
  
        /* 祝福墙中返回首页 */ 
  
  
        $("#blessing-return").click(function(){ 
  
  
            $(".seven-box").fadeOut(function(){ 
  
  
                $home.fadeIn(); 
  
  
            }) 
  
  
        }) 
  
  
    }, 
  
  
     /*---------------------------------查看婚礼地址-------------------------------*/ 
  
  
    _searchAddress: function(){ 
  
  
        var $home = $(".home"), 
  
  
             $toAddress = $("#to-address"); /* 婚礼地址导航 */ 
  
  
             $address = $(".address"), /* 婚礼地址图 */ 
  
  
             $addressReturn = $("#address-return"); 
  
  
 
  
  
        $toAddress.click(function(){ 
  
  
            $home.fadeOut(); 
  
  
            $address.fadeIn(); 
  
  
        }) 
  
  
 
  
  
        /* 婚礼地址返回首页 */ 
  
  
        $addressReturn.click(function(){ 
  
  
            $address.fadeOut(); 
  
  
            $home.fadeIn(); 
  
  
        }) 
  
  
    } 
  
  
} 
  
  
 
  
  
 
  
  
/*---------------------------------移动的小车-------------------------------*/ 
  
  
function initCar(){ 
  
  
    var $home = $(".home"); /* 首页 */ 
  
  
    setCarPosition(); 
  
  
    setTimeout(function(){ 
  
  
        $home.fadeIn(); 
  
  
    },6500); 
  
  
} 
  
  
 
  
  
/* 婚车位置定位和滑动方法 */ 
  
  
function setCarPosition(){ 
  
  
    var $car = $(".car"), 
  
  
          wWidth = $(window).width(), /* 文档宽度 */ 
  
  
          wHeight = $(window).height(), /* 窗口高度 */ 
  
  
          carWidth = $car.height(), /* 婚车宽度 */ 
  
  
          carHeight = $car.height(); /* 婚车高度 */ 
  
  
    $car.css({top:wHeight - carHeight - 100}); 
  
  
    $car.animate({left: wWidth - carWidth + 100},8000).fadeOut(); 
  
  
} 
  
  
 
  
  
 
  
  
/*---------------------------------图片墙-------------------------------*/ 
  
  
var  picPage = 0, /* 当前是第几张图片放大和缩小 */ 
  
  
       picLeft, /* 图片左边距离 */ 
  
  
       picTop; /* 图片上部定位距离 */ 
  
  
 
  
  
/* 自动放大缩小图片方法 */ 
  
  
function autoPicWall(){ 
  
  
    var $pictureWallPic = $(".picture-wall div"), 
  
  
         $own = $pictureWallPic.eq(picPage), 
  
  
         isBig = $own.hasClass("bigCenter"), /* 放大时有这个class */ 
  
  
         hasClassPicRow = $own.hasClass("picRow"); /* 判断图片是行的（就是宽大于高） */ 
  
  
 
  
  
    /* 调用图片放大 */ 
  
  
    becomeBig($own,hasClassPicRow); 
  
  
 
  
  
    /* 隔2秒图片自动缩小 */ 
  
  
    setTimeout(function(){becomeSmall($own,hasClassPicRow);},2000); 
  
  
 
  
  
    /* 保证当前放大图片为图片总个数内，也就是说存在这个图片 */ 
  
  
    if(picPage < $pictureWallPic.length - 1){ 
  
  
        picPage++; 
  
  
    }else if(picPage == $pictureWallPic.length - 1){ /* 如果当前图片为***一张图片，则又从***张图片开始显示 */ 
  
  
        picPage = 0; 
  
  
    } 
  
  
 
  
  
} 
  
  
 
  
  
/* 图片变大方法 */ 
  
  
function becomeBig($own,hasClassPicRow){ 
  
  
    var $mask = $(".mask"), 
  
  
          pictureWallWidth = $(".picture-wall").width(), 
  
  
          pictureWallHeight = $(".picture-wall").height(); 
  
  
 
  
  
    picLeft = $own.css("left"); /* 原始绝对定位left值 */ 
  
  
    picTop = $own.css("top"); /* 原始绝对定位top值 */ 
  
  
    $own.toggleClass("bigCenter"); /* 添加放大的class属性 */ 
  
  
    $mask.fadeIn(); 
  
  
 
  
  
    /* 图片为行图片，也就是宽度大于高度 */ 
  
  
    if(hasClassPicRow){ 
  
  
        for(var i = 120; i < 720; i+=20){ 
  
  
            $own.find("img").animate({"width": i+"px", "height": i/1.5+"px"},2); 
  
  
            $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i/1.5)/2+"px"},2); 
  
  
        } 
  
  
    }else{ 
  
  
        for(var i = 80; i < 480; i+=20){ 
  
  
            $own.find("img").animate({"width": i+"px", "height": i*1.5+"px"},2); 
  
  
            $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i*1.5)/2+"px"},2); 
  
  
        } 
  
  
    } 
  
  
} 
  
  
 
  
  
/* 图片缩小方法 */ 
  
  
function becomeSmall($own,hasClassPicRow){ 
  
  
    var $mask = $(".mask"), 
  
  
          pictureWallWidth = $(".picture-wall").width(), 
  
  
          pictureWallHeight = $(".picture-wall").height(); 
  
  
 
  
  
    if(hasClassPicRow){ 
  
  
        for(var i = 720; i >= 120; i-=40){ 
  
  
            $own.find("img").animate({"width": i+"px", "height": i/1.5+"px"},2); 
  
  
            /* 图片缩小到中心位置 */ 
  
  
            $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i/1.5)/2+"px"},2); 
  
  
        } 
  
  
    }else{ 
  
  
        for(var i = 480; i >= 80; i-=40){ 
  
  
            $own.find("img").animate({"width": i+"px", "height": i*1.5+"px"},2); 
  
  
            /* 图片缩小到中心位置 */ 
  
  
            $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i*1.5)/2+"px"},2); 
  
  
        } 
  
  
    } 
  
  
     
  
  
    /* 图片缩小到中心位置后，回到原始位置 */ 
  
  
    $own.animate({"left": picLeft, "top": picTop},400,function(){ 
  
  
        $mask.fadeOut(); /* 隐藏遮罩层 */ 
  
  
        $own.toggleClass("bigCenter"); /* 去除放大的class属性 */ 
  
  
    }); 
  
  
} 
  
  
 
  
  
 
  
  
                 
  
  
/*---------------------------------祝福墙进入动画-------------------------------*/ 
  
  
var colCount = 4, /* 多少列 */ 
  
  
        rowCount = 4, /* 多少行 */ 
  
  
                 

                标题名称：jquery版结婚电子请帖
                

                转载来源：http://www.shufengxianlan.com/qtweb/news20/378170.html
            
            

                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
            

                广告
                
            
            

                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联
            
        
        

            
猜你还喜欢下面的内容
            

                

                        UML文献UML表示法指南解析
                    

                        有关云可移植性的三个考量：一.创新互联和容器​
                    

                        创新互联鸿蒙OS教程：鸿蒙OSElement
                    

                        好看视频如何下载视频
                    

                        怎样通过iisapp命令查找pid来解决IIS的cpu占用率过高问题
                    

                        在香港网速太慢怎么办？香港免费服务器体验
                    

                        美国服务器渗透测试是什么
                    

                        163邮件服务器名称？邮箱服务器要租哪一种
                    

                        VB.NET文本文件操作一点通
                    
                            
        
    
    

        

            
网站导航知识
            

                

                        2021windows8.1永久激活密钥？（windows8系统密钥）
                    

                        怎么租用vps便宜又好用
                    

                        win7怎么查看程序使用记录？windows文件操作记录
                    

                        网站推广的意义是什么
                    

                        amv格式视频转换器_视频格式
                    

                        广电装路由器可改善网络吗
                    

                        介绍Servlet实例的运行
                    

                        域名的注册流程是什么，需要哪些材料呢？景安网络服务码
                    

                        虚拟主机空间：数据库管理必备技能(虚拟主机空间里的数据库管理)
                    

                        核心对象WCFDispatcher分析
                    

                        验证正态分布3σ原则的代码如何使用？（python中norm函数的用法是什么）
                    

                        怎样申请域名？(网上如何注册域名)
                    

                        java操作xml的方式有哪些
                    

                        电商网站如何选择服务器
                    

                        Redis读写操作监控实践（redis读写监控）
                    
            
        
        

            
分类信息网
            

                

                        公路钻孔机
                    

                        隧道混凝土搅拌车
                    

                        LED显示屏
                    

                        集装箱
                    

                        阳光房
                    

                        玻璃隔断
                    

                        发电机维修
                    

                        广告推广
                    

                        水泥搅拌车
                    

                        阳台护栏
                    

                        除甲醛
                    

                        被动防护网
                    

                        花箱
                    

                        户外休闲椅
                    

                        主动防护网
                    

                        水处理设备
                    
            
        
    


    

        成都名片印刷　　 　腾讯香港空间　　 　营销推广　　 　商城网站　　 　上市企业网站建设方案　　 　成都艺考培训　　 　成都小程序　　 　成都服务器租用　　 　泸州网站建设　　 　梓潼网站设计　　 　宜宾网站建设　　 　西信服务器托管　　 　成都小程序开发　　 　重庆网站制作　　 　四川柴油发电机　　 　成都企业网站改版　　 　服务器托管　　 　明安消防器材　　 　抖音代运营　　 　400电话申请