首页 > 代码库 > jQuery动画-圣诞节礼物
jQuery动画-圣诞节礼物
▓▓▓▓▓▓ 大致介绍
下午看到了一个送圣诞礼物的小动画，正好要快到圣诞节了，就动手模仿并改进了一些小问题
原地址：花式轮播----圣诞礼物传送
思路：动画中一共有五个礼物，他们平均分布在屏幕中，设置最外边的两个礼物旋转一定的角度并隐藏，动画开始，每个礼物向右移动一定的位置，然后再把第五个礼物添加到第一个礼物之前，这样这五个礼物就重新排列了，在写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 });
jQuery动画-圣诞节礼物
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。