你的位置:首页 > Java教程

[Java教程]使用原生JS实现一个风箱式的demo,并封装了一个运动框架


声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构。话不多说,现在开始改demo的制作。

首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架。

 1 function getStyle(obj,attr) { 2   if(obj.currentStyle){ 3     return obj.currentStyle[attr];//为了获取IE下的属性值 4   }else{ 5     return window.getComputedStyle(obj,null)[attr];//为了获取W3C浏览器下的属性值 6   } 7 } 8  9 function animate(obj,json){10   clearInterval(obj.timer);11   obj.timer = setInterval(function () {12     var flag = true;13     var current = 0;14     for(var attr in json){15       if(attr == 'opacity'){16         current = parseInt(getStyle(obj,attr)*100);17       }else{18         current = parseInt(getStyle(obj,attr));19       };20 21       var step = (json[attr] - current) / 10;22       step = step > 0 ? Math.ceil(step) : Math.floor(step);23       //先判断属性是否为透明度24       if(attr == 'opacity'){25         //首先判断浏览器是否支持opacity26         if('opacity' in obj.style){27           obj.style.opacity = (current + step) / 100;28         }else{29           obj.style.filter = 'alpha(opacity = ' + (current + step) + ')';30         }31       //再判断属性是否为z-index32       }else if(attr == 'zIndex'){33         obj.style.zIndex = json[attr];34       //最后再判断35       }else{36         obj.style[attr] = current + step + 'px';37       }38 39       if(current != json[attr]){40         flag = false;41       }42     }43 44     if(flag){45       clearInterval(obj.timer);46     }47   },5);48 }

在该框架中兼容了不同的浏览器,并且允许传入opacity和z-index这样的属性,当然,像width,height,left,right这样常见的属性是必不可少的。利用该框架,可以实现非常棒的效果。所以现在开始正式做该DEMO。

首先是index.html的制作。

1 <div id="box">2   <ul>3     <li></li>4     <li></li>5     <li></li>6     <li></li>7     <li></li>8   </ul>9 </div>

index.html的制作非常的简单,我们会将图片作为li的背景图片在javascript中进行插入。之后,我们进行CSS样式的调节。

 1 *{ 2     margin:0px; 3     padding:0px; 4   } 5   #box{ 6     width:1300px; 7     height:400px; 8     margin:100px auto; 9     overflow: hidden;10   }11   #box ul{12     height:400px;13     width:1300px;14   }15   #box ul li{16     width:240px;17     height:400px;18     float:left;19     overflow: hidden;20   }

javascript的代码如下:

 1 window.onload = function () { 2     var box = document.getElementById('box'); 3     var aLi = box.children[0].children; 4     for(var i=0;i<aLi.length;i++){ 5       aLi[i].style.backgroundImage = 'url(' + 'images/' + (i + 1) + '.jpg'; 6       aLi[i].onmouseover = function(){ 7         for(var i=0;i<aLi.length;i++){ 8           animate(aLi[i],{width:100}); 9         }10         animate(this,{width:800});11       };12       aLi[i].onmouseout = function(){13         for(var i=0;i<aLi.length;i++){14           animate(aLi[i],{width:240});15         }16       }17     }18   }

这样使用原生JS实现的风箱效果demo就实现了,当然,还可以利用封装好的animate框架实现类似网易的轮播图效果。