手风琴效果
用到了我自己的库里几个函数（sbi.array.each,sbi.dom.ready,sbi.event.addEvent,sbi.ani.animate）这些都是最基本的封装函数了，所以就不放上来了。
先看效果图：
这是默认效果
这里鼠标移到其中一项时的效果
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css" title="">
* {padding:0;margin:0;}
ul {list-style:none;}
#box {width:800px;height:300px;margin:100px auto;position:relative;overflow:hidden;}
#box li {width:500px;height:300px;font-size:100px;line-height:300px;color:#fff;position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div id="box">
<ul>
<li style="background:#aaa">0</li>
<li style="background:#999">1</li>
<li style="background:#888">2</li>
<li style="background:#777">3</li>
<li style="background:#666">4</li>
<li style="background:#555">5</li>
<li style="background:#444">6</li>
<li style="background:#333">7</li>
<li style="background:#222">8</li>
<li style="background:#111">9</li>
</ul>
</div>
<script type="text/javascript" src="sbi.js"></script>
<script type="text/javascript">
var outer = document.getElementById('box');
var outerWidth = outer.offsetWidth;
var lis = outer.getElementsByTagName('li');
var itemWidth = lis[0].offsetWidth;
var len = lis.length;
var reset = [];//用于存放各项的初始位置
var timer = null;
for(var i=0;i<len;i++){
reset.push(Math.round(outerWidth/len)*i);//平均公配各项的初始位置
};
//整个效果的关键，计算鼠标移到其中一项时，每项的位置，
function getPosition(n){
var re = [];
var m = Math.round((outerWidth - itemWidth)/(len-1));//计算展开其中一项时，平均公摊到其它项的值
for(var i=0;i<len;i++){
if(i <= n){
re[re.length] = Math.floor(i*m);//当前项和其左则的值
}else{
re[re.length] = Math.floor((i-1)*m) + itemWidth;//当前项右侧的值，注意要加上当前项的宽度
}
}
return re;
};
//初始化
function init(){
for(var i=0;i<len;i++){
sbi.ani.animate(lis[i],{'left':reset[i]});
}
}
sbi.array.each(lis,function(item,index){
sbi.event.addEvent(item,'mouseenter',function(){
if(timer) clearTimeout(timer);
//这里用setTimeout来避免鼠标在上面快速切换时带来不必要的消耗
timer = setTimeout(function(){
var o = getPosition(index);//鼠标移到其中一项时，计算每项的位置
for(var i = 0;i<len;i++){
sbi.ani.animate(lis[i],{'left':o[i]});//让每一项滑到对应的位置
}
},100)
});
})
//鼠标移开后还原
sbi.event.addEvent(outer,'mouseleave',function(){
init();
})
//页面加载完后，初始化
sbi.dom.ready(function(){
init();
});
</script>
</body>
</html>
浙公网安备 33010602011771号