今天给大家分享一个用原生JS实现的手风琴特效，效果如下：
实现代码如下，欢迎大家复制粘贴。
代码语言：javascript复制<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原生JS实现手风琴特效</title>
<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>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 引入的运动函数 -->
<script src="js/move.js"></script>
<script>
// 获取元素
var box = document.getElementById("box");
var list = box.children[0];
var lis = list.children;
// 操作li设置背景
for (var i = 0; i < lis.length; i ) {
lis[i].style.backgroundImage = "url(images/" i ".jpg)";
// 移入的时候让当前这个运动到800，其余运动到100
lis[i].onmouseover = function () {
for (var i = 0; i < lis.length; i ) {
animate(lis[i], { "width": 100 });
}
animate(this, { "width": 800 });
};
// 移出时，所有回到240
lis[i].onmouseout = function () {
for (var i = 0; i < lis.length; i ) {
animate(lis[i], { "width": 240 });
}
};
}
</script>
</body>
</html>以下是上面代码中引入的运动函数move.js代码。
代码语言：javascript复制function animate(tag, obj, fn) {
clearInterval(tag.timer);
tag.timer = setInterval(function () {
// 假设当前这一次定时器代码执行可以清除（每个样式都到达了指定位置）
var flag = true;
// 先遍历obj
for (var k in obj) {
// 由于obj中有一些属性可能是zIndex或者opacity，这时需要单独处理
if (k == "opacity") {
// 将透明度当前值和目标值都设置为扩大后的倍数，设置时除以相应倍数即可
var target = obj[k] * 100;
var leader = getStyle(tag, k) * 100 || 0;
var step = (target - leader) / 10;
// 给step设置取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader step;
// 透明度的设置需要去掉单位
tag.style[k] = leader / 100;
} else if (k == "zIndex") {
// zIndex不需要渐变，直接设置即可
tag.style.zIndex = obj[k];
} else {
var target = obj[k];
var leader = parseInt(getStyle(tag, k)) || 0;
var step = (target - leader) / 10;
// 给step设置取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader step;
tag.style[k] = leader "px";
};
// 提取出每种条件都需要的代码
if (leader != target) {
flag = false;
}
};
if (flag) {
clearInterval(tag.timer);
fn && fn();
}
}, 20);
}
function getStyle(tag, attr) {
if (tag.currentStyle) {
return tag.currentStyle[attr];
} else {
return getComputedStyle(tag, null)[attr];
}
}
