大致介紹
下午看到了一個送圣誕禮物的小動畫，正好要快到圣誕節了，就動手模仿并改進了一些小問題
原地址：花式輪播----圣誕禮物傳送
思路：動畫中一共有五個禮物，他們平均分布在屏幕中，設置最外邊的兩個禮物旋轉一定的角度并隱藏，動畫開始，每個禮物向右移動一定的位置，然后再把第五個禮物添加到第一個禮物之前，這樣這五個禮物就重新排列了，在寫jQ時只管禮物位置的變化就行了，因為禮物的旋轉和隱藏在樣式中都已經設置好了，某個禮物如果成為第一個禮物就會自動隱藏旋轉
基本結構
代碼：
<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: 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代碼
在源碼中，作者將這個五個禮物的初始位置寫在了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); }); });以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
