很酷的上下滑动选项卡菜单

更新时间：2009年07月07日点击数：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>炫浪资源下载素材-很酷的上下滑动选项卡菜单</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">

<style type="text/css">
body{
color: #333;
font-size: 11px;
font-family: verdana;
}
a{
color: #fff;
text-decoration: none;
}
a:hover{
color: #DFE44F;
}
p{
margin: 0;
padding: 5px;
line-height: 1.5em;
text-align: justify;
border: 1px solid #73A405;
}
#wrapper{
width: 500px;
margin: 0 auto;
}
.box{
background: #fff;
}
.boxholder{
clear: both;
padding: 5px;
background: #8DC70A;
}
.tab{
float: left;
height: 30px;
width: 110px;
margin: 0 1px 0 0;
text-align: center;
background-color: #8DC70A;
}
.tabtxt{
margin: 0;
color: #fff;
font-size: 12px;
padding: 9px 0 0 0;
}
</style>
<script type="text/javascript">
var Class = {
	create: function() {
		return function() {
			this.initialize.apply(this, arguments);
		}
	}
}
Object.extend = function(destination, source) {
	for (property in source) destination[property] = source[property];
	return destination;
}
Function.prototype.bind = function(object) {
	var __method = this;
	return function() {
		return __method.apply(object, arguments);
	}
}
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
	return function(event) {
		__method.call(object, event || window.event);
	}
}
function $() {
	if (arguments.length == 1) return get$(arguments[0]);
	var elements = [];
	$c(arguments).each(function(el){
		elements.push(get$(el));
	});
	return elements;
	function get$(el){
		if (typeof el == 'string') el = document.getElementById(el);
		return el;
	}
}
if (!window.Element) var Element = new Object();
Object.extend(Element, {
	remove: function(element) {
		element = $(element);
		element.parentNode.removeChild(element);
	},
	hasClassName: function(element, className) {
		element = $(element);
		if (!element) return;
		var hasClass = false;
		element.className.split(' ').each(function(cn){
			if (cn == className) hasClass = true;
		});
		return hasClass;
	},
	addClassName: function(element, className) {
		element = $(element);
		Element.removeClassName(element, className);
		element.className += ' ' + className;
	},
	removeClassName: function(element, className) {
		element = $(element);
		if (!element) return;
		var newClassName = '';
		element.className.split(' ').each(function(cn, i){
			if (cn != className){
				if (i > 0) newClassName += ' ';
				newClassName += cn;
			}
		});
		element.className = newClassName;
	},
	cleanWhitespace: function(element) {
		element = $(element);
		$c(element.childNodes).each(function(node){
			if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) Element.remove(node);
		});
	},
	find: function(element, what) {
		element = $(element)[what];
		while (element.nodeType != 1) element = element[what];
		return element;
	}
});
var Position = {
	cumulativeOffset: function(element) {
		var valueT = 0, valueL = 0;
		do {
			valueT += element.offsetTop  || 0;
			valueL += element.offsetLeft || 0;
			element = element.offsetParent;
		} while (element);
		return [valueL, valueT];
	}
};
document.getElementsByClassName = function(className) {
	var children = document.getElementsByTagName('*') || document.all;
	var elements = [];
	$c(children).each(function(child){
		if (Element.hasClassName(child, className)) elements.push(child);
	});  
	return elements;
}
//useful array functions
Array.prototype.each = function(func){
	for(var i=0;ob=this[i];i++) func(ob, i);
}
function $c(array){
	var nArray = [];
	for (i=0;el=array[i];i++) nArray.push(el);
	return nArray;
}
var fx = new Object();
//base
fx.Base = function(){};
fx.Base.prototype = {
	setOptions: function(options) {
	this.options = {
		duration: 500,
		onComplete: '',
		transition: fx.sinoidal
	}
	Object.extend(this.options, options || {});
	},
	go: function() {
		this.startTime = (new Date).getTime();
		this.timer = setInterval (this.step.bind(this), 13);
	},
	step: function() {
		var time  = (new Date).getTime();
		if (time >= this.options.duration+this.startTime) {
			this.now = this.to;
			clearInterval (this.timer);
			this.timer = null;
			if (this.options.onComplete) setTimeout(this.options.onComplete.bind(this), 10);
		}
		else {
			var Tpos = (time - this.startTime) / (this.options.duration);
			this.now = this.options.transition(Tpos) * (this.to-this.from) + this.from;
		}
		this.increase();
	},
	custom: function(from, to) {
		if (this.timer != null) return;
		this.from = from;
		this.to = to;
		this.go();
	},
	hide: function() {
		this.now = 0;
		this.increase();
	},
	clearTimer: function() {
		clearInterval(this.timer);
		this.timer = null;
	}
}
//stretchers
fx.Layout = Class.create();
fx.Layout.prototype = Object.extend(new fx.Base(), {
	initialize: function(el, options) {
		this.el = $(el);
		this.el.style.overflow = "hidden";
		this.el.iniWidth = this.el.offsetWidth;
		this.el.iniHeight = this.el.offsetHeight;
		this.setOptions(options);
	}
});
fx.Height = Class.create();
Object.extend(Object.extend(fx.Height.prototype, fx.Layout.prototype), {	
	increase: function() {
		this.el.style.height = this.now + "px";
	},

toggle: function() {
		if (this.el.offsetHeight > 0) this.custom(this.el.offsetHeight, 0);
		else this.custom(0, this.el.scrollHeight);
	}
});
fx.Width = Class.create();
Object.extend(Object.extend(fx.Width.prototype, fx.Layout.prototype), {	
	increase: function() {
		this.el.style.width = this.now + "px";
	},
	toggle: function(){
		if (this.el.offsetWidth > 0) this.custom(this.el.offsetWidth, 0);
		else this.custom(0, this.el.iniWidth);
	}
});
//fader
fx.Opacity = Class.create();
fx.Opacity.prototype = Object.extend(new fx.Base(), {
	initialize: function(el, options) {
		this.el = $(el);
		this.now = 1;
		this.increase();
		this.setOptions(options);
	},
	increase: function() {
		if (this.now == 1 && (/Firefox/.test(navigator.userAgent))) this.now = 0.9999;
		this.setOpacity(this.now);
	},
	setOpacity: function(opacity) {
		if (opacity == 0) this.el.style.visibility = "hidden";
		else this.el.style.visibility = "visible";
		if (window.ActiveXObject) this.el.style.filter = "alpha(opacity=" + opacity*100 + ")";
		this.el.style.opacity = opacity;
	},
	toggle: function() {
		if (this.now > 0) this.custom(1, 0);
		else this.custom(0, 1);
	}
});
//transitions
fx.sinoidal = function(pos){
	return ((-Math.cos(pos*Math.PI)/2) + 0.5);
	//this transition is from script.aculo.us
}
fx.linear = function(pos){
	return pos;
}
fx.cubic = function(pos){
	return Math.pow(pos, 3);
}
fx.circ = function(pos){
	return Math.sqrt(pos);
}
//smooth scroll
fx.Scroll = Class.create();
fx.Scroll.prototype = Object.extend(new fx.Base(), {
	initialize: function(options) {
		this.setOptions(options);
	},
	scrollTo: function(el){
		var dest = Position.cumulativeOffset($(el))[1];
		var client = window.innerHeight || document.documentElement.clientHeight;
		var full = document.documentElement.scrollHeight;
		var top = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
		if (dest+client > full) this.custom(top, dest - client + (full-dest));
		else this.custom(top, dest);
	},
	increase: function(){
		window.scrollTo(0, this.now);
	}
});
//text size modify, now works with pixels too.
fx.Text = Class.create();
fx.Text.prototype = Object.extend(new fx.Base(), {
	initialize: function(el, options) {
		this.el = $(el);
		this.setOptions(options);
		if (!this.options.unit) this.options.unit = "em";
	},

increase: function() {
		this.el.style.fontSize = this.now + this.options.unit;
	}
});
//composition effect: widht/height/opacity
fx.Combo = Class.create();
fx.Combo.prototype = {
	setOptions: function(options) {
		this.options = {
			opacity: true,
			height: true,
			width: false
		}
		Object.extend(this.options, options || {});
	},
	initialize: function(el, options) {
		this.el = $(el);
		this.setOptions(options);
		if (this.options.opacity) {
			this.el.o = new fx.Opacity(el, options);
			options.onComplete = null;
		}
		if (this.options.height) {
			this.el.h = new fx.Height(el, options);
			options.onComplete = null;	
		}
		if (this.options.width) this.el.w = new fx.Width(el, options);
	},
	toggle: function() { this.checkExec('toggle'); },
	hide: function(){ this.checkExec('hide'); },
	clearTimer: function(){ this.checkExec('clearTimer'); },
	checkExec: function(func){
		if (this.el.o) this.el.o[func]();
		if (this.el.h) this.el.h[func]();
		if (this.el.w) this.el.w[func]();
	},
	//only if width+height
	resizeTo: function(hto, wto) {
		if (this.el.h && this.el.w) {
			this.el.h.custom(this.el.offsetHeight, this.el.offsetHeight + hto);
			this.el.w.custom(this.el.offsetWidth, this.el.offsetWidth + wto);
		}
	},
	customSize: function(hto, wto) {
		if (this.el.h && this.el.w) {
			this.el.h.custom(this.el.offsetHeight, hto);
			this.el.w.custom(this.el.offsetWidth, wto);
		}
	}
}
fx.Accordion = Class.create();
fx.Accordion.prototype = {
	setOptions: function(options) {
		this.options = {
			delay: 100,
			opacity: false
		}
		Object.extend(this.options, options || {});
	},
	initialize: function(togglers, elements, options) {
		this.elements = elements;
		this.setOptions(options);
		var options = options || '';
		elements.each(function(el, i){
			options.onComplete = function(){
				if (el.offsetHeight > 0) el.style.height = '1%';
			}
			el.fx = new fx.Combo(el, options);
			el.fx.hide();
		});
		togglers.each(function(tog, i){
			tog.onclick = function(){
				this.showThisHideOpen(elements[i]);
			}.bind(this);
		}.bind(this));
	},
	showThisHideOpen: function(toShow){
		if (toShow.offsetHeight == 0) setTimeout(function(){this.clearAndToggle(toShow);}.bind(this), this.options.delay);
		this.elements.each(function(el, i){
			if (el.offsetHeight > 0 && el != toShow) this.clearAndToggle(el);
		}.bind(this));
	},
	clearAndToggle: function(el){
		el.fx.clearTimer();
		el.fx.toggle();
	}
}
var Remember = new Object();
Remember = function(){};
Remember.prototype = {
	initialize: function(el, options){
		this.el = $(el);
		this.days = 365;
		this.options = options;
		this.effect();
		var cookie = this.readCookie();
		if (cookie) {
			this.fx.now = cookie;
			this.fx.increase();
		}
	},
	//cookie functions based on code by Peter-Paul Koch
	setCookie: function(value) {
		var date = new Date();
		date.setTime(date.getTime()+(this.days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
		document.cookie = this.el+this.el.id+this.prefix+"="+value+expires+"; path=/";
	},
	readCookie: function() {
		var nameEQ = this.el+this.el.id+this.prefix + "=";
		var ca = document.cookie.split(';');
		for(var i=0;c=ca[i];i++) {
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return false;
	},
	custom: function(from, to){
		if (this.fx.now != to) {
			this.setCookie(to);
			this.fx.custom(from, to);
		}
	}
}
fx.RememberHeight = Class.create();
fx.RememberHeight.prototype = Object.extend(new Remember(), {
	effect: function(){
		this.fx = new fx.Height(this.el, this.options);
		this.prefix = 'height';
	},
	toggle: function(){
		if (this.el.offsetHeight == 0) this.setCookie(this.el.scrollHeight);
		else this.setCookie(0);
		this.fx.toggle();
	},
	resize: function(to){
		this.setCookie(this.el.offsetHeight+to);
		this.fx.custom(this.el.offsetHeight,this.el.offsetHeight+to);
	},
	hide: function(){
		if (!this.readCookie()) {
			this.fx.hide();
		}
	}
});
fx.RememberText = Class.create();
fx.RememberText.prototype = Object.extend(new Remember(), {
	effect: function(){
		this.fx = new fx.Text(this.el, this.options);
		this.prefix = 'text';
	}
});
//useful for-replacement
Array.prototype.each = function(func){
	for(var i=0;ob=this[i];i++) func(ob, i);
}
//Easing Equations (c) 2003 Robert Penner, all rights reserved.
//This work is subject to the terms in http://www.robertpenner.com/easing_terms_of_use.html.
//expo
fx.expoIn = function(pos){
	return Math.pow(2, 10 * (pos - 1));
}
fx.expoOut = function(pos){
	return (-Math.pow(2, -10 * pos) + 1);
}
//quad
fx.quadIn = function(pos){
	return Math.pow(pos, 2);
}
fx.quadOut = function(pos){
	return -(pos)*(pos-2);
}
//circ
fx.circOut = function(pos){
	return Math.sqrt(1 - Math.pow(pos-1,2));
}
fx.circIn = function(pos){
	return -(Math.sqrt(1 - Math.pow(pos, 2)) - 1);
}
//back
fx.backIn = function(pos){
	return (pos)*pos*((2.7)*pos - 1.7);
}
fx.backOut = function(pos){
	return ((pos-1)*(pos-1)*((2.7)*(pos-1) + 1.7) + 1);
}
//sine
fx.sineOut = function(pos){
	return Math.sin(pos * (Math.PI/2));
}
fx.sineIn = function(pos){
	return -Math.cos(pos * (Math.PI/2)) + 1;
}
fx.sineInOut = function(pos){
	return -(Math.cos(Math.PI*pos) - 1)/2;
}
function init(){
var stretchers = document.getElementsByClassName('box');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
  toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
  var div = Element.find(h3, 'nextSibling');
   if (window.location.href.indexOf(h3.title) > 0) {
    myAccordion.showThisHideOpen(div);
    found = true;
   }
  });
  if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
</head>
<body>

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><iframe style="display:none"></iframe></td>
  </tr>
</table>
<div id="wrapper">
<div id="content">
<h3 class="tab" title="炫浪素材">
   <div class="tabtxt"><a href="http://sc.xvna.com">炫浪首页</a></div>
</h3>
<div class="tab">
   <h3 class="tabtxt" title="炫浪素材"><a href="http://sc.xvna.com">资源下载</a></h3>
</div>
<div class="tab">
   <h3 class="tabtxt" title="炫浪素材"><a href="http://sc.xvna.com">游戏频道</a></h3>
</div>
<div class="tab">
   <h3 class="tabtxt" title="炫浪素材"><a href="http://sc.xvna.com">设计素材</a></h3>
</div>
<div class="boxholder">
  <div class="box">
    <p><strong>炫浪首页</strong><br />
    炫浪网，综合类门户网站。专业为您提供：科技，学习，图书，游戏，软件，下载，电影，电视剧，动漫，女性，时尚，社区，素材，壁纸各方面的内容.炫浪网，综合类门户网站。专业为您提供：科技，学习，图书，游戏，软件，下载，电影，电视剧，动漫，女性，时尚，社区，素材，壁纸各方面的内容.炫浪网，综合类门户网站。专业为您提供：科技，学习，图书，游戏，软件，下载，电影，电视剧，动漫，女性，时尚，社区，素材，壁纸各方面的内容.</p>
  </div>
  <div class="box">
    <p><strong资源下载</strong><br />
     炫浪资源下载站为你提供各类精品资源下载,其下载内容包括:软件、游戏、高清电影、连续剧、资料、音乐、歌曲、动画、漫画、综艺、体育节目等下载. 炫浪资源下载站为你提供各类精品资源下载,其下载内容包括:软件、游戏、高清电影、连续剧、资料、音乐、歌曲、动画、漫画、综艺、体育节目等下载. 炫浪资源下载站为你提供各类精品资源下载,其下载内容包括:软件、游戏、高清电影、连续剧、资料、音乐、歌曲、动画、漫画、综艺、体育节目等下载. 炫浪资源下载站为你提供各类精品资源下载,其下载内容包括:软件、游戏、高清电影、连续剧、资料、音乐、歌曲、动画、漫画、综艺、体育节目等下载.</p>
  </div>
  <div class="box">
    <p><strong>游戏频道</strong><br />
    炫浪网游戏频道为您提供内容包括:游戏资讯,攻略心得,秘技宝典,戏说杂谈,游戏评测,补丁,修改器,游戏存档,游戏壁纸,游戏论坛,游戏专题等... 炫浪网游戏频道为您提供内容包括:游戏资讯,攻略心得,秘技宝典,戏说杂谈,游戏评测,补丁,修改器,游戏存档,游戏壁纸,游戏论坛,游戏专题等... 炫浪网游戏频道为您提供内容包括:游戏资讯,攻略心得,秘技宝典,戏说杂谈,游戏评测,补丁,修改器,游戏存档,游戏壁纸,游戏论坛,游戏专题等... 炫浪网游戏频道为您提供内容包括:游戏资讯,攻略心得,秘技宝典,戏说杂谈,游戏评测,补丁,修改器,游戏存档,游戏壁纸,游戏论坛,游戏专题等... 炫浪网游戏频道为您提供内容包括:游戏资讯,攻略心得,秘技宝典,戏说杂谈,游戏评测,补丁,修改器,游戏存档,游戏壁纸,游戏论坛,游戏专题等... </p>
  </div>
  <div class="box">
    <p><strong>设计素材</strong><br />
     炫浪素材站专业提供各类设计素材,内容包括:特效,代码,图片,素材,矢量,Flash,动画,图标,字体,样式,网页PSD模板,笔刷,背景,头像,网站模板等... 炫浪素材站专业提供各类设计素材,内容包括:特效,代码,图片,素材,矢量,Flash,动画,图标,字体,样式,网页PSD模板,笔刷,背景,头像,网站模板等... 炫浪素材站专业提供各类设计素材,内容包括:特效,代码,图片,素材,矢量,Flash,动画,图标,字体,样式,网页PSD模板,笔刷,背景,头像,网站模板等... 炫浪素材站专业提供各类设计素材,内容包括:特效,代码,图片,素材,矢量,Flash,动画,图标,字体,样式,网页PSD模板,笔刷,背景,头像,网站模板等... 炫浪素材站专业提供各类设计素材,内容包括:特效,代码,图片,素材,矢量,Flash,动画,图标,字体,样式,网页PSD模板,笔刷,背景,头像,网站模板等...</p>
  </div>
</div>
</div>
</div>
<script type="text/javascript">
Element.cleanWhitespace('content');
init();
</script>
</body>
</html>

赞助商链接

炫友推荐

炫浪推广