原生JS實現風箱式demo,並封裝了一個運動架構(執行個體代碼)，風箱demo

原生JS實現風箱式demo,並封裝了一個運動架構(執行個體代碼)，風箱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,並封裝了一個運動架構(執行個體代碼)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。