Shulou(Shulou.com)06/02 Report--

How to achieve the jquery version of the wedding e-invitation, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

The elder sister saw the jquery version of the small wedding (can dynamically add blessings), thought it was not bad, so let me make an electronic invitation for them. I've been doing it for more than half a year, and I've been lazy and haven't sent it. Now that I remember it, I'll put it up for everyone to have a look at.

First, picture display

1. Opening animation

The newcomer drove his car slowly towards us, from one end to the other, the taste of which was drunk in his heart.

two。 Home page

The home page includes photo albums, invitations, blessing walls and wedding addresses.

1)。 Photo album

The album is made up of 12 small pictures in the shape of a heart, and the pictures become bigger and smaller one by one.

2)。 Invitation letter

The two love each other as long as the proof is available, and it starts day and night.

3)。 Blessing wall

Blessing Wall Animation:

Message board:

4)。 Wedding address

Second, code display

1.html code

Photo album invitation Blessing Wall Wedding place

Ask me to send my best wishes. You must be happy ~ I wish you a long life together! Give birth to an early child ~ Happy marriage ~ have a baby and recognize me as a godmother! Tie the knot O (∩ _ ∩) O ~ must be happy ~ wish you a long life together! Give birth to an early child ~ Happy marriage ~ have a baby and recognize me as a godmother! Tie the knot O (∩ _ ∩) O ~

< $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; iMurray 40) {$own.find ("img"). Animate ({"width": I + "px", "height": iAccord 1.5 + "px"}, 2); / * the image zooms out to the center position * / $own.animate ({"left": (pictureWallWidth-i) / 2 + "px", "top": (pictureWallHeight-i/1.5) / 2 + "px"}, 2) }} else {for (var I = 480; I > = 80; iMurray 40) {$own.find ("img") .animate ({"width": I + "px", "height": iTunes 1.5 + "px"}, 2) / * the image zooms out to the central location * / $own.animate ({"left": (pictureWallWidth-i) / 2 + "px", "top": (pictureWallHeight-i*1.5) / 2 + "px"}, 2) }} / * after the picture zooms out to the center, return to the original location * / $own.animate ({"left": picLeft, "top": picTop}, 400 mask.fadeOut () {$mask.fadeOut (); / * hide mask layer * / $own.toggleClass ("bigCenter"); / * remove the enlarged class attribute * /}) } / *-- enter the animation of blessing wall-- * / var colCount = 4, / * how many columns * / rowCount = 4, / * how many lines * / $sixBox Function scene6 () {$sixBox = $(".six-box"); / * scenario 6 box * / $sixBox.fadeIn (); / * scatter * / scatter (); setTimeout (together,100); / * call aggregation * / setTimeout (scene7,2000) / * enter scene 7 * /} / * aggregate all images * / function together () {var $sixDiv = $sixBox.find ("div"), / * div * / sixDivWidth = $sixDiv.width () in scenario 6, / * width of div in scene 6 * / sixDivHeight = $sixDiv.height () / * height of small div in scenario 6 * / sixBoxWidth = $sixBox.width (), / * scene six width * / sixBoxHeight = $sixBox.height () / * scene six height * / $sixDiv.each (function () {var _ index = $(this). Index (), col = _ index%colCount, / * column * / row = Math.floor (_ index/rowCount), / * rows * / cssLeft = sixBoxWidth/2-colCount/2*sixDivWidth + col*sixDivWidth / * value of left * / cssTop = sixBoxHeight/2-rowCount/2*sixDivHeight + row*sixDivHeight, / * value of top * / divLeft =-col*sixDivWidth, / * width of background location * / divTop =-row*sixDivHeight / * height of background location * / $(this) .animate ({"left": cssLeft, "top": cssTop-100}, 800) })} / * all pictures are scattered * / function scatter () {var $sixDiv = $sixBox.find ("div"), / * small div * / sixDivWidth = $sixDiv.width () in scene 6, / * width of small div in scene 6 * / sixDivHeight = $sixDiv.height (), / * height of div in scene 6 * / sixBoxWidth = $sixBox.width () / * scene six width * / sixBoxHeight = $sixBox.height () / * scene six height * / $sixDiv.each (function () {var _ index = $(this). Index (), col = _ index%colCount, / * column * / row = Math.floor (_ index/rowCount), / * rows * / cssLeft = (col-1) * (sixBoxWidth+sixDivWidth)-sixDivWidth / * the horizontal spacing here is the box size plus its own width * / cssTop = (row-1) * (sixBoxHeight+sixDivHeight)-sixDivWidth, / * the horizontal spacing here is the box size plus its own width * / divLeft =-col*sixDivWidth, / * the width of the background location * / divTop =-row*sixDivHeight / * height of background location * / $(this) .css ({"left": cssLeft, "top": cssTop "background-position": divLeft+ "px" + divTop+ "px"})} / *-- Blessing Wall content page-- * / function scene7 () {var $sevenDiv = $(".blessing-content div") $sevenBox = $(".clients-box") $sixBox.hide (); $sevenBox.fadeIn (1000); $sevenDiv.each (function () {defineSevenDiv ($(this));})} / * define the position and rotation of the blessing sticker * / function defineSevenDiv ($own) {var _ obj = defineRandom (); $own.css ({"transform": "rotate (" + _ obj.rotate+ "deg)"}) / * set random rotation value * / $own.animate ({left: _ obj.left+ "px", top: _ obj.top+ "px"}) / * Random layout * /} / * define random left,top and rotation value * / function defineRandom () {var randomLeft = Math.floor (680* (Math.random () + 30, / * picture left value * / randomTop = Math.floor (400*Math.random ()) + 30, / * picture top value * / randomRotate = 20-Math.floor (40*Math.random ()) / * return {left: randomLeft, top: randomTop, rotate:randomRotate}} / * drag the picture * / function draggableNote () {$(".rotation-content div") .draggable ({containment: $(".rotation-content"), zIndex: 2700 Start: function () {$(this) .css ({"transform": "rotate (0deg)", "cursor": "crosshair"}) / * start dragging the picture to rotate to 0, change the mouse style * /}, stop: function () {var _ obj = defineRandom (); $(this) .css ({"transform": "rotate (" + _ obj.rotate+ "deg)", "cursor": "pointer"}) / * stop dragging and rotate to random * /}}) $(function () {sceneObject.init ();}) is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.