文章分类

标签导航

JS侧滑门效果

发布时间:2012-09-18 09:11:19 访问次数:5135 【关闭此页】

  Flash侧滑门效果不错,但是不利于搜索引擎收录。应客户需求,用JS写了个侧滑门效果,贴出来与大家分享。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>侧滑门</title>
<style type="text/css">
#wrap, #wrap .s {
	position: absolute;
	width: 500px;
	height: 300px;
	overflow: hidden;
}
#wrap {
	position: static;
	margin: 0 auto;
	border: 1px solid #aaa;
}
#wrap .t {
	float: left;
	width: 12px;
	padding: 5px;
	height: 288px;
	cursor: pointer;
	border: 1px solid #999;
	background-color: #ccc;
}
#wrap .t:hover {
	border: 1px solid #f60;
	background-color: #fC0;
}
#wrap .c {
	margin-left: 22px;
	padding: 5px;
	height: 290px;
	background-color: #eee;
}
</style>
</head>
<body>
<div style="padding:50px 0">
	<div id="wrap">
		<div class="s"><a class="t">侧滑门一</a>
			<div class="c"><div style="font-size:200px;line-height:300px;padding-left:130px;color:#f00">1</div></div>
		</div>
		<div class="s"><a class="t">侧滑门二</a>
			<div class="c"><div style="font-size:200px;line-height:300px;padding-left:130px;color:#f00">2</div></div>
		</div>
		<div class="s"><a class="t">侧滑门三</a>
			<div class="c"><div style="font-size:200px;line-height:300px;padding-left:130px;color:#f00">3</div></div>
		</div>
		<div class="s"><a class="t">侧滑门四</a>
			<div class="c"><div style="font-size:200px;line-height:300px;padding-left:130px;color:#f00">4</div></div>
		</div>
		<div class="s"><a class="t">侧滑门五</a>
			<div class="c"><div style="font-size:200px;line-height:300px;padding-left:130px;color:#f00">5</div></div>
		</div>
	</div>
</div>
<script type="text/javascript">
function init(){
	var wrap=document.getElementById('wrap');
	wrap.innerHTML='<div>'+wrap.innerHTML+'</div>';
	wrap=wrap.firstChild;
	wrap.className='s';
	var W=wrap.offsetWidth,w,n=wrap.lastChild,C=[],r=0;
	var x=function(t,b,c,d){if((t/=d)<(1/2.75))return c*(7.5625*t*t)+b;return t<(2/2.75)&&c*(7.5625*(t-=(1.5/2.75))*t+.75)+b||t<(2.5/2.75)&&c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b||c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b};
	var Move=function(e){
		var s=parseInt(e.getAttribute('s')),l=parseInt(e.getAttribute('l'));
		if(!s)return false;
		if(r<0&&s>0||r>0&&s<0)return false;
		r+=s;
		var t=0,b=parseInt(e.style.marginLeft),c=s*W,d=50,i;
		e.setAttribute('s',0);
		function _run(){
			if(t<d){
				t++;
				var X=Math.ceil(x(t,b,c,d));
				if(s==1){
					for(i=0;i<l;i++)if(C[i].getAttribute('s')==1)Move(C[i]);
				}else{
					for(i=l+1;i<C.length;i++)if(C[i].getAttribute('s')==-1)Move(C[i]);
				}
				e.style.marginLeft=X+"px";
				Move._t=setTimeout(_run,10);
			}else{
				e.style.marginLeft=c+b+"px";
				e.setAttribute('s',-s);
				r-=s;
			}
		}
		_run();
		return false;
	};
	while(n){
		if(n.nodeType==1){
			n.firstChild.onclick=function(){Move(this.parentNode)};
			if(!w)w=n.firstChild.offsetWidth;
			W-=w;
			n.style.marginLeft=W+'px';
			n.setAttribute('s',-1);
			n.setAttribute('l',C.length);
			C.push(n);
		}
		n=n.previousSibling;
	}
}
init();
</script>
</body>
</html>

本文标签:网页设计JavaScript
首 页|关于我们|网站建设|域名服务|虚拟主机|百度优化|成功案例|资讯中心|联系方式