jQuery实现圣诞节礼物动画案例解析

transition: all 1s;
}
.cr-icon img:first-child{
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
opacity: 0;
width: 0;
}
.cr-icon img:last-child{
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
opacity: 0;
width: 0;
}

 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实现圣诞节礼物动画案例解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！