原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
声明，该DEMO依托于某个培训机构中，非常感谢这个培训结构。话不多说，现在开始改demo的制作。
首先，在前端的学习过程中，轮播图是我们一定要学习的，所以为了更加高效的实现各种轮播图，封装了一个运动的框架。
functiongetStyle(obj,attr){
if(obj.currentStyle){
returnobj.currentStyle[attr];//为了获取IE下的属性值
}else{
returnwindow.getComputedStyle(obj,null)[attr];//为了获取W3C浏览器下的属性值
}
}
functionanimate(obj,json){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
varflag=true;
varcurrent=0;
for(varattrinjson){
if(attr=='opacity'){
current=parseInt(getStyle(obj,attr)*100);
}else{
current=parseInt(getStyle(obj,attr));
};
varstep=(json[attr]-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
//先判断属性是否为透明度
if(attr=='opacity'){
//首先判断浏览器是否支持opacity
if('opacity'inobj.style){
obj.style.opacity=(current+step)/100;
}else{
obj.style.filter='alpha(opacity='+(current+step)+')';
}
//再判断属性是否为z-index
}elseif(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的制作。
<divid="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:100pxauto;
overflow:hidden;
}
#boxul{
height:400px;
width:1300px;
}
#boxulli{
width:240px;
height:400px;
float:left;
overflow:hidden;
}
javascript的代码如下：
window.onload=function(){
varbox=document.getElementById('box');
varaLi=box.children[0].children;
for(vari=0;i<aLi.length;i++){
aLi[i].style.backgroundImage='url('+'images/'+(i+1)+'.jpg';
aLi[i].onmouseover=function(){
for(vari=0;i<aLi.length;i++){
animate(aLi[i],{width:100});
}
animate(this,{width:800});
};
aLi[i].onmouseout=function(){
for(vari=0;i<aLi.length;i++){
animate(aLi[i],{width:240});
}
}
}
}
这样使用原生JS实现的风箱效果demo就实现了，当然，还可以利用封装好的animate框架实现类似网易的轮播图效果。
以上这篇原生JS实现风箱式demo,并封装了一个运动框架(实例代码)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。