声明,该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框架实现类似网易的轮播图效果。
原标题:使用原生JS实现一个风箱式的demo,并封装了一个运动框架
关键词:JS