中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

下面小編就為大家帶來一篇原生JS實現風箱式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,并封裝了一個運動框架(實例代碼)就是小編分享給大家的全部內容了，希望能給大家一個參考