JS侧滑门效果
发布时间：2012-09-18 09:11:19 访问次数：5343 【关闭此页】
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>