js以及jquery实现手风琴效果

最近又复习了jQuery的知识，既然jQuery是javascript的一个库。jQuery能做到的事情javascript也能做到。因此用这两种方法实现了图片手风琴效果。

按照惯例，还是上代码吧，因为代码里有我的注释也就相当于解释了！(^__^) 嘻嘻……

先看一下javascript的代码吧：

div布局：注意哦，里面的图片我们用js代码生成

<div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>

css样式：

<style type="text/css">  *{  margin: 0;  padding: 0;  }  ul{  list-style: none;  }  #box{  width: 1150px;  height: 400px;  margin: 50px auto;  border: 1px solid red;  overflow: hidden;  }  #box ul{  width: 1300px;  }  #box ul li{  width: 240px;  height: 400px;  float: left;  } </style>

要写js代码了。这里封装了一个完整的运动框架（我个人觉得哈，你可以继续完善，不过你要告诉我，我也学习一下！）

/* * 实现动画的步骤: 1.怎样得到当前的样式封装一个函数 getStyle() 2.步长的计算用(目标位置 - 当前的样式) / 10 3. 缓动动画原理: 盒子本身的样式 + 步长(不断变化的) *//* * css设置透明度，一般在ie中用的是filter:alpha(opacity=0);而在firefox中，一般就是直接使用opacity:0*/// 多个属性的运动框架以及添加回调函数function animate(obj,json,fn){ // 目标obj json 属性：属性值 fn回调函数 clearInterval(obj.timer); obj.timer = setInterval(function(){ var flag = true;// 用来判断是否停止定时器 // 遍历json for (var attr in json) { //attr 属性 json[attr]值 var curStyle = 0; if (attr == "opacity") { curStyle = parseInt(getStyle(obj,attr)*100); } else{ curStyle = parseInt(getStyle(obj,attr));// 获得数值 } // 得到步长目标位置就是json[attr] var step = (json[attr]-curStyle) / 10; step = step > 0 ? Math.ceil(step) :Math.floor(step); // 判断透明度 if (attr == "opacity") { // 判断用户有没有输入opacity if ("opacity" in obj.style) { obj.style.opacity = (curStyle + step) / 100; } else{ obj.style.filter = "alpha(opacity="+(curStyle +step)+")"; } } else if(attr == "zIndex"){ obj.style.zIndex = json[attr]; } else{ obj.style[attr] = curStyle +step +"px"; } // 判断是否已经都到了目标位置只要其中一个不满足条件就不应该停止定时器 if (curStyle != json[attr]) { flag = false; } } // 判断定时器条件是否该停止了 if (flag) { clearInterval(obj.timer) // 当定时器停止后，动画也就结束了.如果有回调函数就执行回调函数 if(fn){ fn(); } } },30);}// 封装函数得到属性function getStyle(obj,attr) { // 谁的那个属性 if(obj.currentStyle) // ie 等 { return obj.currentStyle[attr]; // 返回传递过来的某个属性 } else { return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器 }}
接着我们在js里面引入我们写的框架

<script src="animate.js"></script>
接下来，写js代码

<script> window.onload = function(){ var box = document.getElementById("box"); var lis = box.children[0].children; for (var i = 0; i < lis.length;i++) { lis[i].style.backgroundImage = "url(images/"+(i+1)+".webp)"; lis[i].onmouseover = function(){ for (var j = 0; j < lis.length;j++) { animate(lis[j],{width:100}); } animate(this,{width:800}); } lis[i].onmouseout = function(){ for (var k = 0; k < lis.length;k++) { animate(lis[k],{width:240}); } } } }</script>
好啦，这样就完成了，具体效果你自己动手看看吧。完整的下载地址为js版本的手风琴效果

写完了js，发现代码量好多啊，看看jquery代码，哦买嘎，切记一定要先引入jQuery的包，再写代码哈！

<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("#box li").each(function(index,ele){ $(ele).css("background","url(images/"+(index+1)+".webp)"); }).mouseenter(function(){ $(this).stop().animate({width:800},500).siblings("li").stop().animate({width:100},500); }).mouseleave(function(){ $("#box li").stop().animate({width:240},500); }); }); </script>
精简了好多。
来吧，我们的jQuery版本手风琴效果下载地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。