使用JS实现手风琴效果

　　想要实现简单的手风琴切换效果，需要使用JS实现，如下是使用javascript源码实现，后续会更新使用jQuery实现。

　　1. 先进行简单的布局：我们可以再ul下添加几个li实现html的简单布局，再给每个li 添加绝对定位，以及设置对应的宽高，如下：

　　　　<style>

　　　　　　* { padding:0 ;margin:0;}
　　　　　　　　ul { width:640px; height:400px; border:1px solid #ccc; position:relative; margin:100px auto; overflow:hidden;}
　　　　　　　　li { width:400px; height:400px; position:absolute; top:0; color:#000; font-size:100px; line-height:400px;list-style:none; 　　　　　　　　　　　　border:1px solid red;}
　　　　</style>

　　　　<body>
　　　　　　<ul id="box">
　　　　　　　　<li>1</li>
　　　　　　　　<li>2</li>
　　　　　　　　<li>3</li>
　　　　　　　　<li>4</li>
　　　　　　</ul>
　　　　</body>

　　布局完成后，得到的初步的效果图如下，所有的li由于绝对定位的原因，全部重叠在一起，不要怕，后面JS来帮忙。

　　2 .如上，实现简单的布局之后，就需要使用JS实现手风琴效果了，

　　想要实现手风琴效果，首先，需要准备几个使用原生JS封装好的函数，如获取元素属性值的方法getStyle,移动元素到固定位置的函数doMove,两个函数如下：

　　function getStyle(obj,attr){ //获得样式的属性值,包括不透明度
　　　　if(!window.getComputedStyle){
　　　　　　return obj.currentStyle[attr]; //兼容IE6 7 8
　　　　}else{
　　　　　　return getComputedStyle( obj )[attr]; //兼容标准浏览器
　　　　}
　　}　　　　　

　　实现如上的两个函数后，然后获取ul以及其子元素li,

　　var oUl = document.getElementById("box"); //获取ul元素

　　var aLi = oUl.getElementsByTagName("li");　　　//获取ul下的所有li元素

　　var arrColor = ["red","blue","green","pink"];　　　　//首先定义几个颜色值，为后面每个Li设定不同的背景颜色

　　var liDistance = 80;　　　　　　//设置每个li之间距离值

　　var oLiW = parseInt(getStyle(aLi[0],"width")); //由于所有li的宽度都相同，提前获取li的宽度值，后面会用到

　　for(var i=0;i<aLi.length;i++){
　　　　aLi[i].index = i; //为每个li设定索引值，后续会用到
　　　　aLi[i].style.left = liDistance*i + "px"; //为每个li设定一个left值，让li不在重叠
　　　　aLi[i].style.background = arrColor[i]; //设定背景颜色，加以区分
　　　　aLi[i].onmouseover = function(){ //为li加入移入动作
　　　　　　if(parseInt(getStyle(this,"left")) != this.index * liDistance) { //当li不在初始位置时，执行如下操作
　　　　　　　　for(var j=this.index;j>0;j--){ //从当前的li,直到小于其的所有li，都移动其left值到初始位置
　　　　　　　　　　doMove(aLi[j],20,20,"left",liDistance*j);
　　　　　　　　}
　　　　　　}else{ //当li在初始位置时，执行如下操作
　　　　　　　　for(var j=this.index+1;j<aLi.length;j++){ //从当前的li的后一个开始，到最后的Li，开始移动

　　　　　　　　　　doMove(aLi[j],20,20,"left",oLiW+liDistance*(j-1)); //显示出需要的li的内容
　　　　　　　　}
　　　　　　}
　　　　}
　　}

3. 全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴切换</title>
<style>
* { padding:0 ;margin:0;}
ul { width:640px; height:400px; border:1px solid #ccc; position:relative; margin:100px auto; overflow:hidden;}
li { width:400px; height:400px; position:absolute; top:0; color:#000; font-size:100px; line-height:400px;list-style:none; border:1px solid red;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById("box");
var aLi = oUl.getElementsByTagName("li");
var arrColor = ["red","blue","green","pink"];
var liDistance = 80;
var oLiW = parseInt(getStyle(aLi[0],"width"));
for(var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].style.left = liDistance*i + "px";
aLi[i].style.background = arrColor[i];
aLi[i].onmouseover = function(){
if(parseInt(getStyle(this,"left")) != this.index * liDistance) {
for(var j=this.index;j>0;j--){
doMove(aLi[j],20,20,"left",liDistance*j);
}
}else{
for(var j=this.index+1;j<aLi.length;j++){

doMove(aLi[j],20,20,"left",oLiW+liDistance*(j-1));
}
}
}
}
function getStyle(obj,attr){ //获得样式的属性值,包括不透明度
if(!window.getComputedStyle){
if(attr ==="opacity"){
return obj.filters.alpha.opacity; //兼容IE6 7 8
}else{
return obj.currentStyle[attr]; //兼容IE6 7 8
}
}else{
if(attr ==="opacity"){
return getComputedStyle( obj )["opacity"]*100; //兼容标准浏览器 ,IE9+
}else{
return getComputedStyle( obj )[attr]; //兼容IE6 7 8
}
}
}
function doMove(obj,step,speed,attr,target,func){ //移动元素到目标点
/*
obj 待操作的元素
step 移动步长
speed 移动间隔时间
attr 移动方向，“left”代表左右，“top”代表上下
target 目标坐标值
func 回调函数
*/
var doMoveTimer = null;
clearInterval(doMoveTimer);
var num = parseInt(getStyle(obj,attr));
doMoveTimer = setInterval(function(){
if(num<target){
num +=step;
if(num>target){
num = target;
}
}
if(num>target){
num -=step;
if(num<target){
num = target;
}
}
if(attr ==="opacity"){
setStyle(obj,attr,num);
}else{
obj.style[attr] = num+"px";
}
//obj.style[attr] = num+"px";
if(num === target){
clearInterval(doMoveTimer);
/*
if(func){
func();
}
*/
func&&func();
}
},speed);

}
}
</script>
</head>
<body>
<ul id="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>

巴特西

使用JS实现手风琴效果

最新文章

热门文章