欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)圣誕節(jié)禮物動(dòng)畫案例解析

 更新時(shí)間：2016年12月25日 11:36:42   作者：老板丶魚丸粗面  
這篇文章主要介紹了jQuery實(shí)現(xiàn)圣誕節(jié)禮物動(dòng)畫案例解析的相關(guān)資料,需要的朋友可以參考下

大致介紹

　　下午看到了一個(gè)送圣誕禮物的小動(dòng)畫，正好要快到圣誕節(jié)了，就動(dòng)手模仿并改進(jìn)了一些小問題

　　原地址：jQuery實(shí)現(xiàn)花式輪播之圣誕節(jié)禮物傳送效果      

　　思路：動(dòng)畫中一共有五個(gè)禮物，他們平均分布在屏幕中，設(shè)置最外邊的兩個(gè)禮物旋轉(zhuǎn)一定的角度并隱藏，動(dòng)畫開始，每個(gè)禮物向右移動(dòng)一定的位置，然后再把第五個(gè)禮物添加到第一個(gè)禮物之前，這樣這五個(gè)禮物就重新排列了，在寫jQ時(shí)只管禮物位置的變化就行了，因?yàn)槎Y物的旋轉(zhuǎn)和隱藏在樣式中都已經(jīng)設(shè)置好了，某個(gè)禮物如果成為第一個(gè)禮物就會(huì)自動(dòng)隱藏旋轉(zhuǎn)

　　如果對(duì)其中的方法不熟悉的可以參考我寫的jQuery學(xué)習(xí)之路，里面有講解

 基本結(jié)構(gòu)

　　　代碼：

<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 屬性，這兩個(gè)屬性是動(dòng)態(tài)的，如果文檔的結(jié)構(gòu)變了，這兩個(gè)屬性的值也會(huì)相應(yīng)的改變，這樣我們就不必再麻煩的判斷哪個(gè)元素是最后一個(gè)元素（第一個(gè)元素），直接用這兩個(gè)屬性就會(huì)自動(dòng)選擇第一個(gè)元素和最后一個(gè)元素

html, body {
   height: 100%;
   margin: 0;
   padding: 0;
      }
  .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:100;
  }
  .cr-l img,.cr-r img{
   width: 100%;
   position: absolute;
   top:50%;
  }
  .cr-l{
   left: 0;
  }
  .cr-r{
   right:0;
  }
  .cr-icon{
   bottom: 15%;
   left:0;
   position: absolute;
   z-index: 1000;
   width: 100%;
   height: 70%;
   text-align: center;
  }
  .cr-icon img{
   margin-right: 25px;
   width: 10%;
   vertical-align: top;
   position: absolute;
   bottom: 0;
   opacity: 1;
   transform:rotate(0deg);
   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代碼

　　在源碼中，作者將這個(gè)五個(gè)禮物的初始位置寫在了HTML結(jié)構(gòu)中，我覺得不太好就在jQuery的代碼中實(shí)現(xiàn)了，代碼沒有什么難的，就是對(duì)思路的實(shí)現(xiàn)

$(function() {
  // 點(diǎn)擊禮物圖片，切換圖片
  $('#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;
  // 設(shè)置高
  $(".cr").css("height",height);
  // 設(shè)置圖片的初始位置
  for(var i=0;i<oImg.length;i++){
   $(oImg[i]).css('left', 5+i*20+'%');
  }
  // 圖片輪換函數(shù)
  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();
  // 定時(shí)器，開始輪換
  timer = setInterval(scrollLogo,1800);
  // 鼠標(biāo)移入清楚輪換
  oImg.mouseover(function(){
   clearInterval(timer);
  });
  // 鼠標(biāo)移出開始輪換
  oImg.mouseleave(function() {
   timer = setInterval(scrollLogo,1800);
  });
 });

以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)圣誕節(jié)禮物動(dòng)畫案例解析，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論