jquery Animations-christmas Gifts

▓▓▓▓▓▓ approximate Introduction

In the afternoon saw a Christmas gift of the small animation, just to get to christmas, to imitate and improve a few small problems

Original Address: Fancy Carousel----christmas Gift Transfer

Idea: There are five gifts in the animation, they are evenly distributed in the screen, set the outermost two gifts to rotate a certain angle and hide, the animation begins, each gift to the right to move a certain position, and then add the fifth gift to the first gift, so that the five gifts are rearranged, When writing jq, just change the position of the gift, because the gift of rotation and hidden in the style has been set up, a gift if it becomes the first gift will automatically hide the rotation

If you are unfamiliar with the method, you can refer to the jquery learning path I wrote, which is explained

▓▓▓▓▓▓ Basic Structure

Code:

1     <Divclass= "cr">2         <Divclass= "cr-l"><imgsrc= "img/fatherch.png"alt=""/></Div>3         <Divclass= "cr-icon">4             <DivID= "cr-icon">5                 <imgstyle= "left:5%"src= "img/gift2.png"alt=""/>6                 <imgstyle= "left:25%"src= "img/gift2.png"alt=""/>7                 <imgstyle= "left:45%"src= "img/gift2.png"alt=""/>8                 <imgstyle= "left:65%"src= "img/gift2.png"alt=""/>9                 <imgstyle= "left:85%"src= "img/gift2.png"alt=""/>Ten             </Div> one         </Div> a         <Divclass= "cr-r"><imgsrc= "img/family.png"alt=""/></Div> -     </Div>

▓▓▓▓▓▓ style

　　Used in css: first and: last property, these two properties are dynamic, if the structure of the document is changed, the values of the two properties will be changed accordingly, so that we do not have to trouble to determine which element is the final element (element one), The first and last elements are automatically selected using these two attributes directly

1 html, Body{2 Height:100%;3 margin:0;4 padding:0;5}6 . CR{7 width:100%;8 position:relative;9 background:URL (".. /img/bg.png ") no-repeat 0 0;Ten -webkit-background-size:100% 100%; one background-size:100% 100%; a Overflow:Hidden; -} - . Cr-l,.cr-r{ the position:Absolute; - Bottom:10%; - width:20.8%; - Height:70%; + Z-index: -; -} + . Cr-l img,.cr-r img{ a width:100%; at position:Absolute; - Top:50%; -} - . Cr-l{ -  left:0; -} in . Cr-r{ -  right:0; to} + . Cr-icon{ - Bottom:15%; the  left:0; * position:Absolute; $ Z-index: +;Panax Notoginseng width:100%; - Height:70%; the text-align:Center; +} a . Cr-icon img{ the Margin-right:25px; + width:10%; - vertical-align:Top; $ position:Absolute; $ Bottom:0; - Opacity:1; - Transform:Rotate (0deg); the transition:all 1s; -}Wuyi . Cr-icon Img:first-child{ the Transform:Rotate ( -90deg); - -webkit-transform:Rotate ( -90deg); wu Opacity:0; - width:0; about} $ . Cr-icon Img:last-child{ - Transform:Rotate (90deg); - -webkit-transform:Rotate (90deg); - Opacity:0; a width:0; +}

▓▓▓▓▓▓jquery Code

In the source code, the author writes the initial position of the five gift in the HTML structure, I feel not very good in the jquery code implementation, the code is not difficult, that is, the realization of the idea

1$(function() {2 3         //Click on the gift picture to toggle the picture4$ (' #cr-icon img '). Click (function(){5             if($( this). attr (' src ') = = ' Img/gift2.png '){6$( this). attr (' src ', ' img/gift.png ');7}Else{8$( this). attr (' src ', ' img/gift2.png ');9             }Ten         }); one  a         varTimer =NULL; -         varoimg = $ (' #cr-icon img '); -         varEnd =document.body.clientWidth; the         varHeight =document.body.scrollHeight; -         //Set High -$ (". cr"). CSS ("height"), height); -  +         //set the initial position of the picture -          for(vari=0;i<oimg.length;i++){ +$ (oimg[i]). css (' left ', 5+i*20+ '% ')); a         } at  -         //Picture rotation function -         functionScrolllogo () { -Oimg.each (function(){ -                 varleft = parseint ($ ( this). css (' left ')); -Left + = end * 0.2; in$( this). css (' left ', left); -             }); to$ (' #cr-icon img:last '). insertbefore (' #cr-icon img:first '). css (' left ', end * 0.05); +         } -  the Scrolllogo (); *  $         //timer, Start RotationPanax NotoginsengTimer = setinterval (scrolllogo,1800); -  the         //mouse move in clear rotation +Oimg.mouseover (function(){ a clearinterval (timer); the         }); +         //mouse move out start rotation -Oimg.mouseleave (function() { $Timer = setinterval (scrolllogo,1800); $         }); -       -});

　　

　　

jquery Animations-christmas Gifts