js下拉式tab标签导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js下拉式tab标签导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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" dir="ltr" lang="es-ES">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>js下拉式tab标签导航</title>
<link rel="stylesheet" href="css/zzsc.css" type="text/css" media="screen" />
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/e24tabmenu.js'></script>
<script type="text/javascript">
		function initApp() {
			oe24TabMenu = new e24TabMenu( 'menu', { mode: 'uppertabs', duration: 1.0, transition: Effect.Transitions.sinoidal } ); 
			oe24TabMenu.toggleMenu($('3d'));
		}
		Event.observe(window, 'load', initApp, false);
	</script>
</head>
<body>
<div id="page">
  <div id="menu" >
    <!---menu  container-->
    <div id="item_3d" class="menutarget">
      <div class="gallery" > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
    </div>
    <div id="item_gall" class="menutarget">
      <div class="gallery"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </div>
    </div>
    <div id="item_menu" class="menutarget">
      <div class="gallery"> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </div>
    </div>
    <div id="item_efec" class="menutarget">
      <div class="gallery"> Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </div>
    </div>
    <a id="3d" href="#3d" rel="e24menuitem[item_3d]"><img src="images/3d.gif" alt="Efectos 3D" /></a> <a id="gall" href="#galerias" rel="e24menuitem[item_gall]"><img src="images/galerias.gif" alt="Galería de fotos AJAX" /></a> <a id="menus" href="#menus" rel="e24menuitem[item_menu]" ><img src="images/menus.gif" alt="Efectos de Menús" /></a> <a id="efec" href="#efectos" rel="e24menuitem[item_efec]"><img src="images/efectos.gif" alt="Otros efectos ajax" /></a>
    <!--texto-->
  </div>
  <!--menu container-->
  <!--End of Menu -->
</div>
</body>
</html>

JS代码(e24writer.js):

// e24Writer e24writer.js v0.4.1,Thu March 21 22:07:12 -0500 2008// Copyright (c) 2008 equipo24 S.L.N.E. (http://www.equipo24.com)//// Permission is hereby granted,free of charge,to any person obtaining// a copy of this software and associated documentation files (the// "Software"),to deal in the Software without restriction,including// without limitation the rights to use,copy,modify,merge,publish,// distribute,sublicense,and/or sell copies of the Software,and to// permit persons to whom the Software is furnished to do so,subject to// the following conditions://// The above copyright notice and this permission notice shall be// included in all copies or substantial portions of the Software.//// THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,// EXPRESS OR IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF// MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE// LIABLE FOR ANY CLAIM,DAMAGES OR OTHER LIABILITY,WHETHER IN AN ACTION// OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,OUT OF OR IN CONNECTION// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.//var e24Writer = Class.create();
	e24Writer.prototype ={
	initialize:function( p_eContainer,p_aOptions ){
	this.m_iCurrent = -1;
	this.m_sDirection = Object.isString(p_aOptions.direction) ? p_aOptions.direction:'leftright';
	this.m_fCallBack = p_aOptions.callback ? p_aOptions.callback:undefined;
	this.m_bAutoStart = p_aOptions.autostart;
	this.m_iDuration = p_aOptions.duration ? p_aOptions.duration:1.0;
	this.m_iInterval = p_aOptions.interval ? p_aOptions.interval:0.3;
	this.m_eContainer = $( p_eContainer );
	this.m_eContainer.setStyle({
	overflow:'hidden'}
);
	this.m_aLetters = this.m_eContainer.childElements();
	this.m_aLetters.each( function(p_eLetter){
	p_eLetter.setStyle({
	display:'none'}
);
}
);
	if (this.m_bAutoStart){
	setTimeout(this.start.bind(this),this.m_iInterval * 1000);
}
}
,start:function(){
	this.m_iIntervalId = setInterval(this._load.bind(this),this.m_iInterval * 1000);
}
,_load:function( ){
	this.m_iCurrent++;
	if (this.m_iCurrent < this.m_aLetters.length - 1){
	fCallBack = undefined;
}
else{
	fCallBack = this._callBack.bind(this);
}
if (this.m_iCurrent < this.m_aLetters.length){
	p_eLetter = this.m_aLetters[ this.m_iCurrent ];
}
else{
	clearInterval(this.m_iIntervalId);
	return;
}
new Effect.Parallel([new Effect.Appear ( p_eLetter,{
	from:0,to:1.0}
)],{
	duration:this.m_iDuration,afterFinish:fCallBack}
);
}
,_callBack:function( p_oObj ){
	if (this.m_fCallBack){
	this.m_fCallBack(this,p_oObj);
}
}
}

JS代码(scriptaculous.js):

// script.aculo.us scriptaculous.js v1.8.1,Thu Jan 03 22:07:12 -0500 2008// Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us,http://mir.aculo.us)//// Permission is hereby granted,free of charge,to any person obtaining// a copy of this software and associated documentation files (the// "Software"),to deal in the Software without restriction,including// without limitation the rights to use,copy,modify,merge,publish,// distribute,sublicense,and/or sell copies of the Software,and to// permit persons to whom the Software is furnished to do so,subject to// the following conditions://// The above copyright notice and this permission notice shall be// included in all copies or substantial portions of the Software.//// THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,// EXPRESS OR IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF// MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE// LIABLE FOR ANY CLAIM,DAMAGES OR OTHER LIABILITY,WHETHER IN AN ACTION// OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,OUT OF OR IN CONNECTION// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.//// For details,see the script.aculo.us web site:http://script.aculo.us/var Scriptaculous ={
	Version:'1.8.1',require:function(libraryName){
	// inserting via DOM fails in Safari 2.0,so brute force approach document.write('<script type="text/javascript" src="'+libraryName+'"><\/script>');
}
,REQUIRED_PROTOTYPE:'1.6.0',load:function(){
	function convertVersionString(versionString){
	var r = versionString.split('.');
	return parseInt(r[0])*100000 + parseInt(r[1])*1000 + parseInt(r[2]);
}
if((typeof Prototype=='undefined') || (typeof Element == 'undefined') || (typeof Element.Methods=='undefined') || (convertVersionString(Prototype.Version) < convertVersionString(Scriptaculous.REQUIRED_PROTOTYPE))) throw("script.aculo.us requires the Prototype JavaScript framework >= " + Scriptaculous.REQUIRED_PROTOTYPE);
	$A(document.getElementsByTagName("script")).findAll( function(s){
	return (s.src && s.src.match(/scriptaculous\.js(\?.*)?$/))}
).each( function(s){
	var path = s.src.replace(/scriptaculous\.js(\?.*)?$/,'');
	var includes = s.src.match(/\?.*load=([a-z,]*)/);
	(includes ? includes[1]:'builder,effects,dragdrop,controls,slider,sound').split(',').each( function(include){
	Scriptaculous.require(path+include+'.js')}
);
}
);
}
}
Scriptaculous.load();

CSS代码(zzsc.css):

@charset "utf-8";html{background:url(../images/bg.jpg);border:0px;margin:0;padding:0;}
body{border:0px;margin:0;padding:0;}
#page{margin:0px auto;width:800px;}
#menu{position:relative;height:500px;margin-left:5px;}
.gallery{margin:30px auto;width:80%;padding-top:10px;}
.menuitem{background:#afec77;}
.menutarget{background-color:#afec77;display:none;border-bottom:5px solid white;border-left:5px solid white;border-right:5px solid white;}
img{border:0px;}
a{color:#FFCC33;}

附件:下载该文件资源,减少时间成本(增值服务)