聲明，該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,并封裝了一個運動框架(實例代碼)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
