声明,该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 //首先判断浏览器是否支持opacity 26 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-index 32 }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框架实现类似网易的轮播图效果。
时间: 2024-10-19 17:08:49