软件教程
返回页面顶部的个性特效
<!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>cnhww-网页特效-综合特效-个性的页面顶部和底部切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body{background:#1a3265 url(about:blank) no-repeat fixed;padding:0px;margin:0px;cursor:default;}
/*静止菜单*/
#fixedMenu{width:80px;height:66px;position:fixed;z-index:29;bottom:0;right:0;background:transparent url(http://www.zzsky.cn/effect/images/201101151030/twitter.png) 0 0;}
</style>
<!--[if lte IE 9]>
<style type="text/css">
/*静止菜单*/
#fixedMenu{_position:absolute;_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);}
</style>
<![endif]-->
<script type="text/javascript">
function $(t){return _.getElementById(t);}
/* 平滑跳转到锚点处理块 */
// 转换为数字
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 };
}
// 跳转
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);
}
/** 全局变量声明 */
var _ = document;
//绑定页面加载完成事件调用函数
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
//静止按钮
if(t=$('fixedMenu')){
t.style.cursor = 'pointer';
t.title = '本鸟只可远观不可亵玩焉...';
x=2;
t.onclick = function (){
if (document.documentElement && document.documentElement.scrollTop) {
st = document.documentElement.scrollTop;
} else if (document.body) {
st = document.body.scrollTop;
}
if(st<x){
scroller('footer',800);
}else{
scroller('header',800);
}
}
t.onmouseover = function (){
this.style.backgroundPosition='0 -66px';
}
t.onmouseout = function (){
this.style.backgroundPosition='0 0';
}
}
});
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="header" style="color:#ffffff;">这里是页面顶部</div>
<div id="content" style="height:2000px;"></div>
<div id="footer" style="color:#ffffff;">这里是页面底部</div>
<div id="fixedMenu"></div>
</body>
</html>
-
·上一条：测试电脑屏幕分辨率和屏幕尺寸的代码
·下一条：超酷的首页模块拖曳效果代码
