jQuery动画-圣诞节礼物

▓▓▓▓▓▓ 大致介绍

　　下午看到了一个送圣诞礼物的小动画，正好要快到圣诞节了，就动手模仿并改进了一些小问题

　　思路：动画中一共有五个礼物，他们平均分布在屏幕中，设置最外边的两个礼物旋转一定的角度并隐藏，动画开始，每个礼物向右移动一定的位置，然后再把第五个礼物添加到第一个礼物之前，这样这五个礼物就重新排列了，在写jQ时只管礼物位置的变化就行了，因为礼物的旋转和隐藏在样式中都已经设置好了，某个礼物如果成为第一个礼物就会自动隐藏旋转

　　如果对其中的方法不熟悉的可以参考我写的jQuery学习之路，里面有讲解

▓▓▓▓▓▓ 基本结构

　　　代码：

     <div class="cr">

         <div class="cr-l"><img src="img/fatherCh.png" alt=""/></div>

         <div class="cr-icon">

             <div id="cr-icon">

                 <img style="left:5%" src="img/gift2.png" alt=""/>

                 <img style="left:25%" src="img/gift2.png" alt=""/>

                 <img style="left:45%" src="img/gift2.png" alt=""/>

                 <img style="left:65%" src="img/gift2.png" alt=""/>

                 <img style="left:85%" src="img/gift2.png" alt=""/>

             </div>

         </div>

         <div class="cr-r"><img src="img/family.png" alt=""/></div>

     </div>

▓▓▓▓▓▓ 样式

　　在css中用到了:first 和 :last 属性，这两个属性是动态的，如果文档的结构变了，这两个属性的值也会相应的改变，这样我们就不必再麻烦的判断哪个元素是最后一个元素（第一个元素），直接用这两个属性就会自动选择第一个元素和最后一个元素

         html, body {

             height: 100%;

             margin:;

             padding:;

                         }

         .cr{

             width: 100%;

             position: relative;

             background: url("../img/bg.png") no-repeat 0 0;

             -webkit-background-size: 100% 100%;

             background-size: 100% 100%;

             overflow: hidden;

         }

         .cr-l,.cr-r{

             position: absolute;

             bottom:10%;

             width: 20.8%;

             height: 70%;

             z-index:;

         }

         .cr-l img,.cr-r img{

             width: 100%;

             position: absolute;

             top:50%;

         }

         .cr-l{

             left:;

         }

         .cr-r{

             right:;

         }

         .cr-icon{

             bottom: 15%;

             left:;

             position: absolute;

             z-index:;

             width: 100%;

             height: 70%;

             text-align: center;

         }

         .cr-icon img{

             margin-right: 25px;

             width: 10%;

             vertical-align: top;

             position: absolute;

             bottom:;

             opacity:;

             transform:rotate(0deg);

             transition: all 1s;

         }

         .cr-icon img:first-child{

             transform:rotate(-90deg);

             -webkit-transform:rotate(-90deg);

             opacity:;

             width:;

         }

         .cr-icon img:last-child{

             transform:rotate(90deg);

             -webkit-transform:rotate(90deg);

             opacity:;

             width:;

         }

▓▓▓▓▓▓ jQuery代码

　　在源码中，作者将这个五个礼物的初始位置写在了HTML结构中，我觉得不太好就在jQuery的代码中实现了，代码没有什么难的，就是对思路的实现

    $(function() {

         // 点击礼物图片，切换图片

         $('#cr-icon  img').click(function(){

             if($(this).attr('src') == 'img/gift2.png'){

                 $(this).attr('src','img/gift.png');

             }else{

                 $(this).attr('src','img/gift2.png');

             }

         });

         var timer = null;

         var oImg = $('#cr-icon  img');

         var end = document.body.clientWidth;

         var height = document.body.scrollHeight;

         // 设置高

         $(".cr").css("height",height);

         // 设置图片的初始位置

         for(var i=0;i<oImg.length;i++){

             $(oImg[i]).css('left', 5+i*20+'%');

         }

         // 图片轮换函数

         function scrollLogo(){

             oImg.each(function(){

                 var left = parseInt($(this).css('left'));

                 left += end * 0.2;

                 $(this).css('left',left);

             });

             $('#cr-icon img:last').insertBefore('#cr-icon img:first').css('left',end * 0.05);

         }

         scrollLogo();

         // 定时器，开始轮换

         timer = setInterval(scrollLogo,1800);

         // 鼠标移入清楚轮换

         oImg.mouseover(function(){

             clearInterval(timer);

         });

         // 鼠标移出开始轮换

         oImg.mouseleave(function() {

             timer = setInterval(scrollLogo,1800);

         });

     });

巴特西

jQuery动画-圣诞节礼物

▓▓▓▓▓▓ 大致介绍

▓▓▓▓▓▓ 基本结构

▓▓▓▓▓▓ 样式

▓▓▓▓▓▓ jQuery代码

最新文章

热门文章