原生JS实现风箱式demo,并封装了一个运动框架(实例代码)

2019-11-20 09:26:13

字体：大中小

来源：转载

供稿：网友

声明，该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,并封装了一个运动框架(实例代码)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：使用do...while的方法输入一个月中所有的周日(实例代码)

下一篇：jQuery 更改checkbox的状态,无效的解决方法