jQuery动画-圣诞节礼物

2016-12-25 09:38:57来源:cnblogs.com作者:老板丶鱼丸粗面人点击

第七城市

▓▓▓▓▓▓ 大致介绍

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

  原地址:花式轮播----圣诞礼物传送

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

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

 

▓▓▓▓▓▓ 基本结构

   代码:

 1     <div class="cr"> 2         <div class="cr-l"><img src="img/fatherCh.png" alt=""/></div> 3         <div class="cr-icon"> 4             <div id="cr-icon"> 5                 <img style="left:5%" src="img/gift2.png" alt=""/> 6                 <img style="left:25%" src="img/gift2.png" alt=""/> 7                 <img style="left:45%" src="img/gift2.png" alt=""/> 8                 <img style="left:65%" src="img/gift2.png" alt=""/> 9                 <img style="left:85%" src="img/gift2.png" alt=""/>10             </div>11         </div>12         <div class="cr-r"><img src="img/family.png" alt=""/></div>13     </div>

 

▓▓▓▓▓▓ 样式

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

 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;10             -webkit-background-size: 100% 100%;11             background-size: 100% 100%;12             overflow: hidden;13         }14         .cr-l,.cr-r{15             position: absolute;16             bottom:10%;17             width: 20.8%;18             height: 70%;19             z-index:100;20         }21         .cr-l img,.cr-r img{22             width: 100%;23             position: absolute;24             top:50%;25         }26         .cr-l{27             left: 0;28         }29         .cr-r{30             right:0;31         }32         .cr-icon{33             bottom: 15%;34             left:0;35             position: absolute;36             z-index: 1000;37             width: 100%;38             height: 70%;39             text-align: center;40         }41         .cr-icon img{42             margin-right: 25px;43             width: 10%;44             vertical-align: top;45             position: absolute;46             bottom: 0;47             opacity: 1;48             transform:rotate(0deg);49             transition: all 1s;50         }51         .cr-icon img:first-child{52             transform:rotate(-90deg);53             -webkit-transform:rotate(-90deg);54             opacity: 0;55             width: 0;56         }57         .cr-icon img:last-child{58             transform:rotate(90deg);59             -webkit-transform:rotate(90deg);60             opacity: 0;61             width: 0;62         }

 

▓▓▓▓▓▓ jQuery代码

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

 1    $(function() { 2  3         // 点击礼物图片,切换图片 4         $('#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             }10         });11 12         var timer = null;13         var oImg = $('#cr-icon  img');14         var end = document.body.clientWidth;15         var height = document.body.scrollHeight;16         // 设置高17         $(".cr").css("height",height);18 19         // 设置图片的初始位置20         for(var i=0;i<oImg.length;i++){21             $(oImg[i]).css('left', 5+i*20+'%');22         }23 24         // 图片轮换函数25         function scrollLogo(){26             oImg.each(function(){27                 var left = parseInt($(this).css('left'));28                 left += end * 0.2;29                 $(this).css('left',left);30             });31             $('#cr-icon img:last').insertBefore('#cr-icon img:first').css('left',end * 0.05);32         }33 34         scrollLogo();35 36         // 定时器,开始轮换37         timer = setInterval(scrollLogo,1800);38 39         // 鼠标移入清楚轮换40         oImg.mouseover(function(){41             clearInterval(timer);42         });43         // 鼠标移出开始轮换44         oImg.mouseleave(function() {45             timer = setInterval(scrollLogo,1800);46         });47      48     });

 

  

  

 

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台