linux描点工具,Linux_用 Javascript 实现锚点(Anchor)间平滑跳转,本文示例源代码或素材下载 &l - phpStudy...

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

本文示例源代码或素材下载

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

// 说明 :用 Javascript 实现锚点(Anchor)间平滑跳转

// 转换为数字

function intval(v)

{

v = parseInt(v);

return isNaN(v) ? 0 : v;

}

// 获取元素信息

function getPos(e)

{

var l = 0;

var t = 0;

var w = intval(e.style.width);

var h = intval(e.style.height);

var wb = e.offsetWidth;

var hb = 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}; }

// 获取滚动条信息

function getScroll()

{

var t, 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;

}

else if (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 };

}

// 锚点(Anchor)间平滑跳转

function scroller(el, duration)

{

if(typeof el != 'object')

{

el = document.getElementById(el);

}

if(!el) return;

var z = this;

z.el = el;

z.p = getPos(el);

z.s = getScroll();

z.clear = function()

{

window.clearInterval(z.timer);z.timer=null

};

z.t=(new Date).getTime();

z.step = function()

{

var t = (new Date).getTime();

var p = (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);

}

div.test

{

width:400px;   margin:5px auto;   border:1px solid #ccc;

}

div.test strong

{   font-size:16px;   background:#fff;   border-bottom:1px solid #aaa;   margin:0;   display:block;   padding:5px 0;   text-decoration:underline;   color:#059B9A;   cursor:pointer; } div.test p {   height:400px;   background:#f1f1f1;   margin:0;

}

header_1 --> header_4

header_2 --> header_5

header_3 --> header_6

header_4 --> header_7

header_5 --> header_3

header_6 --> header_2

header_7 --> header_1

本文作者:相关阅读:

一个不错的用JavaScript实现的UBB编码函数

CSS网页设计字体大小(em)探讨

node.js 一个简单的页面输出实现代码

MYSQL的FOUND_ROWS()函数

PHP 显示客户端IP与服务器IP的代码

SQL存储时触发不能使用USE怎么办?

关于Oracle的TNS

jQuery 文本框模拟下拉列表效果

表格高级使用技巧_把表格进行到底(必看)

PHP 开发人员:充实您的 XML 工具箱

JQuery autocomplete 使用手册

XP用户观念根深蒂固 - 说服其升级到Windows 7困难重重

汇总SQL Server 2000安装常见问题

转换json格式的日期为Javascript对象的函数

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值