您的位置:首页 > Web前端 > JavaScript

Javascript 实现锚点(Anchor)间平滑跳转

2013-10-11 15:11 441 查看


(function($){
$.fn.scroller=function(options){
vardefaultVal={
duration:500
};
varobj=$.extend({},defaultVal,options);
varel=options.el;
varduration=options.duration;
returnthis.each(function(){
if(typeofel!='object'){
el=document.getElementById(el);
}
if(!el)return;
varz=this;
z.el=el;
z.p=getPos(el);
z.s=getScroll();
z.clear=function(){
window.clearInterval(z.timer);z.timer=null
};
z.t=(newDate).getTime();
z.step=function(){
vart=(newDate).getTime();
varp=(t-z.t)/duration;
if(t>=duration+z.t){
z.clear();
window.setTimeout(function(){z.scroll(z.p.y,z.p.x)},13);
}else{
st=((-Math.cos(p*Math.PI)/2)+0.5)*(z.p.y-z.s.t)+z.s.t;
sl=((-Math.cos(p*Math.PI)/2)+0.5)*(z.p.x-z.s.l)+z.s.l;
z.scroll(st,sl);
}
};
z.scroll=function(t,l){
window.scrollTo(l,t)
};
z.timer=window.setInterval(function(){z.step();},13);
});
};

functionintval(v)
{
v=parseInt(v);
returnisNaN(v)?0:v;
}

//获取元素信息
functiongetPos(e)
{
varl=0;
vart=0;
varw=intval(e.style.width);
varh=intval(e.style.height);
varwb=e.offsetWidth;
varhb=e.offsetHeight;
while(e.offsetParent){
l+=e.offsetLeft+(e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
t+=e.offsetTop+(e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
e=e.offsetParent;
}
l+=e.offsetLeft+(e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
t+=e.offsetTop+(e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
return{x:l,y:t,w:w,h:h,wb:wb,hb:hb};
}
//获取滚动条信息
functiongetScroll()
{
vart,l,w,h;
if(document.documentElement&&document.documentElement.scrollTop){
t=document.documentElement.scrollTop;
l=document.documentElement.scrollLeft;
w=document.documentElement.scrollWidth;
h=document.documentElement.scrollHeight;
}elseif(document.body){
t=document.body.scrollTop;
l=document.body.scrollLeft;
w=document.body.scrollWidth;
h=document.body.scrollHeight;
}
return{t:t,l:l,w:w,h:h};
}
})(jQuery)

$(function(){
$('#goto').click(function(){
$(this).scroller(
{
el:'t1',
duration:1000
}
);
});
})





                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: