手风琴效果

用到了我自己的库里几个函数(sbi.array.each,sbi.dom.ready,sbi.event.addEvent,sbi.ani.animate)这些都是最基本的封装函数了,所以就不放上来了。

先看效果图:

这是默认效果

手风琴效果_第1张图片

这里鼠标移到其中一项时的效果

手风琴效果_第2张图片

代码:

<!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>

  

你可能感兴趣的:(效果)