JS手风琴

页面结构

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

CSS样式

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

JS

<script>
//for循环给li添加背景图片
var liArr = ele$("li");
for (var i=0;i<liArr.length;i++){
liArr[i].style.background = "url(images/"+(i+1)+".jpg)";
liArr[i].onmouseover = overFn;
liArr[i].onmouseout = outFn;
}
//鼠标移入
function overFn()
{
for (var j=0;j<liArr.length;j++)
{
animateManyStyle(liArr[j],{"width":100})
}
animateManyStyle(this,{"width":800})
}
//鼠标移出
function outFn()
{
for (var j=0;j<liArr.length;j++)
{
animateManyStyle(liArr[j],{"width":240})
}
}
</script>

封装的函数

// 多个属性  添加回调函数
function animateManyStyle(obj,json,fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
for(var attr in json){   // attr  属性     json[attr]  值
//开始遍历 json
// 计算步长    用 target 位置 减去当前的位置  除以 10
// console.log(attr);
var current = 0;
if(attr == "opacity")
{
current = parseInt(getStyle(obj,attr)*100);
}
else
{
current = parseInt(getStyle(obj,attr)); // 数值
}
// 目标位置就是  属性值
var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判断透明度
if(attr == "opacity")  // 判断用户有没有输入 opacity属性
{
if("opacity" in obj.style) //判断浏览器是否支持opacity
{
obj.style.opacity = (current + step) /100;
}
else
{
obj.style.filter = "alpha(opacity = "+(current + step)+")";
}
}
else if(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);
if(fn)   //  当定时器停止了， 动画就结束了  如果有回调，就执行回调
{
fn();
}
}
},5)
}
//获取任意一个元素的任意一个样式属性值兼容函数
function getStyle(obj,attr) {
if(obj.currentStyle)  // ie 等
{
return obj.currentStyle[attr];  // 返回传递过来的某个属性
}
else
{
return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
}
}

知识是一种快乐，而好奇则是知识的萌芽。—— 培根