原生JS實現風箱式demo,並封裝了一個運動框架(實例代碼)

聲明，該DEMO依託於某個培訓機構中，非常感謝這個培訓結構。話不多說，現在開始改demo的製作。

首先，在前端的學習過程中，輪播圖是我們一定要學習的，所以為了更加高效的實現各種輪播圖，封裝了一個運動的框架。

 function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr];//為了獲取IE下的屬性值}else{ return window.getComputedStyle(obj,null)[attr];//為了獲取W3C瀏覽器下的屬性值}}function animate(obj,json){ clearInterval(obj.timer); obj.timer = setInterval(function () { var flag = true; var current = 0; for(var attr in json){ if(attr == 'opacity'){ current = parseInt(getStyle(obj,attr)*100); }else{ current = parseInt(getStyle(obj,attr)); }; var step = (json[attr] - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); //先判斷屬性是否為透明度if(attr == 'opacity'){ //首先判斷瀏覽器是否支持opacity if('opacity' in obj.style){ obj.style.opacity = (current + step) / 100; }else{ obj.style.filter = 'alpha(opacity = ' + (current + step) + ')'; } //再判斷屬性是否為z-index }else if(attr == 'zIndex'){ obj.style.zIndex = json[attr]; //最後再判斷}else{ obj.style[attr] = current + step + 'px'; } if(current != json[attr]){ flag = false; } } if(flag){ clearInterval(obj.timer); } },5);}

在該框架中兼容了不同的瀏覽器，並且允許傳入opacity和z-index這樣的屬性，當然，像width,height,left,right這樣常見的屬性是必不可少的。利用該框架，可以實現非常棒的效果。所以現在開始正式做該DEMO。

首先是index.html的製作。

 <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>

index.html的製作非常的簡單，我們會將圖片作為li的背景圖片在javascript中進行插入。之後，我們進行CSS樣式的調節。

 *{ margin:0px; padding:0px; } #box{ width:1300px; height:400px; margin:100px auto; overflow: hidden; } #box ul{ height:400px; width:1300px; } #box ul li{ width:240px; height:400px; float:left; overflow: hidden; }

javascript的代碼如下：

 window.onload = function () { var box = document.getElementById('box'); var aLi = box.children[0].children; for(var i=0;i<aLi.length;i++){ aLi[i].style.backgroundImage = 'url(' + 'images/' + (i + 1) + '.jpg'; aLi[i].onmouseover = function(){ for(var i=0;i<aLi.length;i++){ animate(aLi[i],{width:100}); } animate(this,{width:800}); }; aLi[i].onmouseout = function(){ for(var i=0;i<aLi.length;i++){ animate(aLi[i],{width:240}); } } } }

這樣使用原生JS實現的風箱效果demo就實現了，當然，還可以利用封裝好的animate框架實現類似網易的輪播圖效果。

以上這篇原生JS實現風箱式demo,並封裝了一個運動框架(實例代碼)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。