大致介紹
下午看到了一個(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)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
