打印

选项卡-多点调用-特效-5则 [(新增：仿雅虎高级选项卡)]

jovijian

初级会员

帖子: 36
体力: 80
威望: 0
当前: 海南三亚
离线: 4 天

61^# 大中小发表于 2008-5-18 10:20

谁来开个跨浏览器技术要点教学班啊！！！！！！

TOP

做西部数码代理.Cn1元国际45元 | IT专家提醒您此帖已被关注

kafuka

新手上路

帖子: 3
体力: 4
威望: 0
离线: 4 天

62^# 大中小发表于 2008-6-2 12:38

有没有可以无限伸缩的啊

TOP

【美橙超级G空间】688元绑定10个子目录

63509007

初级会员

帖子: 40
体力: 50
威望: 0
当前: 湖北武汉
离线: 1 天

63^# 大中小发表于 2008-6-2 12:59

感谢楼住分享。目前正想建个小窝。用的着了

TOP

请大家尊重和保护奥运知识产权。

蓝翼孤鹰

初级会员

帖子: 109
体力: 130
威望: 0
当前: 广东广州

64^# 大中小发表于 2008-6-2 13:46

留个名字，以后用了好搜索

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

iskywang

中级会员

帖子: 283
体力: 494
威望: 0
当前: 北京海淀区
离线: 3 天

专长 网页设计,前端制作,JS

65^# 大中小发表于 2008-6-2 14:01

caiying真的好强啊！佩服！

yiyiya2008

TOP

maoweiwer

中级会员

帖子: 155
体力: 280
威望: 0
当前: 重庆九龙坡
离线: 1 天

专长 JS,JAVA,MySQL

66^# 大中小发表于 2008-6-5 01:25

在FF下报脚本错误

TOP

anly298

初级会员

帖子: 26
体力: 61
威望: 0
离线: 1 天

67^# 大中小发表于 2008-6-5 11:33

收下！但是不支持ff.

TOP

cl2006

初级会员

帖子: 73
体力: 136
威望: 0
离线: 33 天

68^# 大中小发表于 2008-6-5 12:43

这个不错可以兼容FF

引用:

原帖由 caiying2007 于 2007-10-17 23:09 发表
1)不知是不是这样(循环效果
2)不知FF是否有效(我没有安装FF,如果无效请高手)
[html]

Semiall.com




      推荐
      生产
      贸易
      服务
      ...

TOP

jie51886

初级会员

帖子: 67
体力: 84
威望: 0
当前: 北京海淀区
离线: 2 天

专长 前端制作

69^# 大中小发表于 2008-6-5 13:31

改LZ的几个js，兼容ff

1）多点调用

<!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>
<style>
body
{
	text-align:center;
}
.tab
{
	width:432px;
	height:208px;
	margin:0 auto;
	overflow:hidden;
	border:1px solid #cccccc;
}
.menu,.menu li
{
	margin:0;
	padding:0;
	height:24px;
	list-style:none;
	overflow:hidden;
	text-align:center;
}
.menu
{
	border-bottom:1px solid #cccccc;
}
.menu .default
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg') no-repeat;
}
.menu .active
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	font-weight:bold;
	color:#FFFFFF;
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg') no-repeat;
}
#more
{
	width:76px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('bg.jpg') no-repeat;
	color:#FF0000;
	font-weight:normal;
	text-align:right
}
.con
{
	width:422px;
	height:184px;
	margin:0 auto;
}
</style>
<head>
<body>
<script>
function init(ids,cons,dis){
	 	document.getElementById(ids).getElementsByTagName('li')[0].className='active';
		document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
//		document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis);}//鼠标指向激发效果
		document.getElementById(ids).onclick=function(o){onmousOver(o,ids,cons,dis);}//点击激发效果
}
function onmousOver(o,ids,cons,dis){
var o = o || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
		if (obj.className=='active'||obj.id=='more')return;
		var o=document.getElementById(ids).getElementsByTagName('li');
		for (var i=0;i<=o.length-1;i++){o[i].className='default'}
		
		obj.className='active';
		if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
}
}
</script>

<div class='tab'>
		<ul id='nav1' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
			<li id="l5" class='default'>第5新闻</li>
		</ul>
		<div class='con' id='con1'>
		</div>
	</div>
<div style="display:none">	
	<div id="div1_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div1_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div1_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div1_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
	<div id="div1_l5">
		<span>增加了！</span>
	</div>
</div>
<script>
init('nav1','con1',"div1_");
</script>

<div class='tab'>
		<ul id='nav2' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
			<li id="more"><a href="#" target=_blank>更多>></a></li>
		</ul>
		<div class='con' id='con2'>
		</div>
	</div>
<div style="display:none">	
	<div id="div2_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div2_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div2_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div2_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
</div>
<script>
init('nav2','con2',"div2_");
</script>

<div class='tab'>
		<ul id='nav3' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="more" style="width:160px"><a href="#" target=_blank>更多>></a></li>
		</ul>
		<div class='con' id='con3'>
		</div>
	</div>
<div style="display:none">	
	<div id="div3_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div3_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div3_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
</div>
<script>
init('nav3','con3',"div3_");
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

2）多点调用—可伸缩

<!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>
<style>
body
{
	text-align:center;
}
.tab
{
	width:422px;
	height:208px;
	margin:0 auto;
	overflow:hidden;
	border:1px solid #cccccc;
}
.menu,.menu li
{
	margin:0;
	padding:0;
	height:24px;
	list-style:none;
	overflow:hidden;
	text-align:center;
}
.menu
{
	border-bottom:1px solid #cccccc;
}
.menu .default
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg') no-repeat;
}
.menu .active
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	font-weight:bold;
	color:#FFFFFF;
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg') no-repeat;
}
.menu .showme,.menu .hidme{
	width:76px;
	float:left;
	font-size:14pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('bg.gif');
	color:#0000FF;
	text-align:right;
	font-weight:bold;
}
.con
{
	width:422px;
	height:184px;
	margin:0 auto;
}
</style>
<head>
<body>
<script>
var tb_h=new Array()
function init(ids,cons,dis,hids,tbs){
	 	document.getElementById(ids).getElementsByTagName('li')[0].className='active';
		document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
		document.getElementById(ids).onmouseover=function(o){onmousOver(o,ids,cons,dis,hids);}//鼠标指向激发效果
//		document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis,hids);}//点击激发效果
		var obj_tab=document.getElementById(tbs)
		tb_h[tbs]=obj_tab.offsetHeight;
}
function onmousOver(o,ids,cons,dis,hids){
var o = o || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
		if (obj.className=='active'||obj.id==hids)return;
		var o=document.getElementById(ids).getElementsByTagName('li');
		for (var i=0;i<=o.length-2;i++){o[i].className='default'}
		
		obj.className='active';
		if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
}
}
function show_con(tbs,ids,hids){
var obj_click=document.getElementById(hids);
obj_click.innerHTML=(obj_click.innerHTML=="+")?"-":"+"
obj_click.className=(obj_click.className=='showme')?'hidme':'showme'
var hid=(obj_click.className=='showme')?1:-1
var obj_tab=document.getElementById(tbs)
var obj_nav=document.getElementById(ids)
var h_m=obj_nav.offsetHeight+2
var H=tb_h[tbs]
var n=20,t=50;
var timers=new Array(n);
if (hid<0){
    for(var i=0;i<n;i++){(
    	function(){
    		if(timers[i]) clearTimeout(timers[i]);
    		var j=i;
    		timers[i]=setTimeout(function(){obj_tab.style.height=H-Math.round((H-h_m)*(j+1)/n)+"px";},(i+1)*t);
    	}
    )()};
}
if (hid>0){
    for(var i=0;i<n;i++){(
    	function(){
    		if(timers[i]) clearTimeout(timers[i]);
    		var j=i;
    		timers[i]=setTimeout(function(){obj_tab.style.height=h_m+Math.round(H*(j+1)/n)+"px";},(i+1)*t);
    	}
    )()};
}
}
</script>

<div id='tab1' class='tab'>
		<ul id='nav1' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="hid1" class="showme"style="width:160px" onclick="show_con('tab1','nav1','hid1')">-</li>
		</ul>
		<div class='con' id='con1'>
		</div>
	</div>
<div style="display:none">	
	<div id="div1_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div1_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div1_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
</div>
<script>
init('nav1','con1',"div1_","hid1",'tab1');
</script>

<div id='tab2' class='tab'>
		<ul id='nav2' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
			<li id="hid2" class="showme" onclick="show_con('tab2','nav2','hid2')">-</li>
		</ul>
		<div class='con' id='con2'>
		</div>
	</div>
<div style="display:none">	
	<div id="div2_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div2_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div2_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div2_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
</div>
<script>
init('nav2','con2',"div2_","hid2",'tab2');
</script>

<div id='tab3' class='tab'>
		<ul id='nav3' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
			<li id="hid3" class="showme" onclick="show_con('tab3','nav3','hid3')">-</li>
		</ul>
		<div class='con' id='con3'>
		</div>
	</div>
<div style="display:none">	
	<div id="div3_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div3_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div3_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div3_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
</div>
<script>
init('nav3','con3',"div3_","hid3",'tab3');
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

3、多点调用—折叠

<!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>
<style>
body
{
	text-align:center;
}
.tab
{
	width:432px;
	height:208px;
	margin:0 auto;
	overflow:hidden;
	border:1px solid #cccccc;
}
.menu,.menu li
{
	margin:0;
	padding:0;
	height:24px;
	list-style:none;
	overflow:hidden;
	text-align:center;
}
.menu
{
	border-bottom:1px solid #cccccc;
}
.menu .default
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg') no-repeat;
}
.menu .active
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	font-weight:bold;
	color:#FFFFFF;
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg') no-repeat;
}
.menu .showme,.menu .hidme{
	width:76px;
	float:left;
	font-size:14pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('/bg.gif');
	color:#0000FF;
	text-align:right;
	font-weight:bold
}
.con
{
	width:422px;
	height:0px;
	margin:0 auto;
}
.tab0{
	height:208
}
</style>
<head>
<body>
<script>
var show_n;
var H=200,h_m=24
var n=20,t=50;
function init(ids,cons,dis,tbs,show_me){
		document.getElementById(ids).onmouseover=function(o){onmousOver(o,ids,cons,dis,tbs);}
		document.getElementById(ids).onclick=function(v){show_con(v,ids,cons,dis,tbs);}
		if (show_me!=0){
			show_n=tbs;
	 		document.getElementById(ids).getElementsByTagName('li')[0].className='active';
			document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
			document.getElementById(tbs).style.height=H+"px";
		}
		else{
			document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML; 
			document.getElementById(tbs).style.height=h_m+"px";
		}
}
function onmousOver(o,ids,cons,dis,tbs){
var o = o || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
		if (obj.className=='active')return;
		var o=document.getElementById(ids).getElementsByTagName('li');
		for (var i=0;i<=o.length-1;i++){o[i].className='default'}
		obj.className='active';
		if (show_n==tbs){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
		obj.onmouseout=function(){if (show_n!=tbs)this.className='default';}
}
}
function show_con(v,ids,cons,dis,tbs){
var v = v || window.event;
var obj_show_tab=document.getElementById(tbs);
var obj_hid_tab=document.getElementById(show_n);
if (show_n!=tbs){
	var o=document.getElementById(show_n).childNodes[0].getElementsByTagName('li');
	for (var i=0;i<=o.length-1;i++){o[i].className='default'}
	show_n=tbs;	
	var obj = v.target || v.srcElement;
	document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;
	var timers= new Array(n);
	for(var i=0;i<n;i++){(
		function(){
    		if(timers[i]) clearTimeout(timers[i]);
    		var j=i;
    		timers[i]=setTimeout(function(){obj_hid_tab.style.height=H-Math.round((H-h_m)*(j+1)/n)+"px";
    										obj_show_tab.style.height=h_m+Math.round((H-h_m)*(j+1)/n)+"px";},(i+1)*t);
    		}
    	)()};
}
}
</script>
<div class="tab0">

<div id='tab1' class='tab'><ul id='nav1' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
		</ul>
		<div class='con' id='con1'>
		</div>
	</div>
<div style="display:none">	
	<div id="div1_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div1_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div1_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
</div>
<script>
init('nav1','con1',"div1_",'tab1',1);
</script>

<div id='tab2' class='tab'><ul id='nav2' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
			<li id="l5" class="default">第5新闻</li>
		</ul>
		<div class='con' id='con2'>
		</div>
	</div>
<div style="display:none">	
	<div id="div2_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div2_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div2_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div2_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
	<div id="div2_l5">
		<span>增加了！</span>
	</div>
</div>
<script>
init('nav2','con2',"div2_",'tab2',0);
</script>

<div id='tab3' class='tab'><ul id='nav3' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
		</ul>
		<div class='con' id='con3'>
		</div>
	</div>
<div style="display:none">	
	<div id="div3_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div3_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div3_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div3_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
</div>
</div>
<script>
init('nav3','con3',"div3_",'tab3',0);
</script>
<script>
//show_con(show_n)
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 jie51886 于 2008-6-5 14:41 编辑 ]

TOP

jie51886

初级会员

帖子: 67
体力: 84
威望: 0
当前: 北京海淀区
离线: 2 天

专长 前端制作

70^# 大中小发表于 2008-6-5 14:42

4）多点调用_各自循环

<!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>
<style>
body
{
	text-align:center;
}
.tab
{
	width:432px;
	height:208px;
	margin:0 auto;
	overflow:hidden;
	border:1px solid #cccccc;
}
.menu,.menu li
{
	margin:0;
	padding:0;
	height:24px;
	list-style:none;
	overflow:hidden;
	text-align:center;
}
.menu
{
	border-bottom:1px solid #cccccc;
}
.menu .default
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg') no-repeat;
}
.menu .active
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	font-weight:bold;
	color:#FFFFFF;
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg') no-repeat;
}
#more
{
	width:76px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('bg.jpg') no-repeat;
	color:#FF0000;
	text-align:right;
	font-weight:normal
}
.con
{
	width:422px;
	height:184px;
	margin:0 auto;
}
</style>
<head>
<body>
<script>
var obj_temp=new Array()
var a_n=0,timer_next;
function init(ids,cons,dis,tt){
	 	document.getElementById(ids).getElementsByTagName('li')[0].className='active';
		document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
		document.getElementById(ids).onmouseover=function(m){onmousOver(m,ids,cons,dis);}
		document.getElementById(ids).onmouseout=function(){timer_next=setInterval(" next_d()",1000);}
		var li_o=document.getElementById(ids).getElementsByTagName('li');
		var li_n=li_o.length-1
		for (var m=0;m<li_o.length;m++)if (li_o[m].id=='more')li_n--;
		obj_temp[a_n]=new Array(ids,cons,dis,tt,li_n,0,1);a_n++
}
function onmousOver(m,ids,cons,dis){
	clearTimeout(timer_next);
	var m = m || window.event;
	var obj=m.target || m.srcElement;
	if (obj.tagName=='LI'){
			var id_ = obj.parentNode.id;
			if (obj.className=='active'||obj.id=='more')return;
			var o=document.getElementById(ids).getElementsByTagName('li');
			for (var i=0;i<=o.length-1;i++){if (o[i].id!='more')o[i].className='default'}
			obj.className='active';
			document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;
			for (var i=0;i<=o.length-1;i++){
				if (o[i].className=='active')var a_n_=i
			}
			
			for (var kk=0;kk<=obj_temp.length-1;kk++){
				if (obj_temp[kk][0]==id_){obj_temp[kk][5]=a_n_;}
			}
	}
}
timer_next=setInterval(" next_d()",1000);
var timer_next
function next_d(){
for (var kk=0;kk<=obj_temp.length-1;kk++){
	obj_temp[kk][6]+=1;
	if (obj_temp[kk][6]>=obj_temp[kk][3]){
		obj_temp[kk][6]=1;
		obj_temp[kk][5]=(obj_temp[kk][5]>=obj_temp[kk][4])?0:obj_temp[kk][5]+1
		li_chang(obj_temp[kk][0],obj_temp[kk][1],obj_temp[kk][2],obj_temp[kk][5]);
	}
}
}
function li_chang(ids,cons,dis,j){
	var o=document.getElementById(ids).getElementsByTagName('li');
	for (var i=0;i<=o.length-1;i++) if (o[i].id!='more')o[i].className='default';
	o[j].className='active';
	document.getElementById(cons).innerHTML=document.getElementById(dis+o[j].id).innerHTML;
}
</script>

<div class='tab'>
		<ul id='nav1' class='menu'><li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
			<li id="l5" class='default'>第5新闻</li>
		</ul>
		<div class='con' id='con1'>
		</div>
	</div>
<div style="display:none">	
	<div id="div1_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div1_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div1_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div1_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
	<div id="div1_l5">
		<span>增加了！</span>
	</div>
</div>
<script>
init('nav1','con1',"div1_",1);
</script>

<div class='tab'>
		<ul id='nav2' class='menu'><li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
			<li id="more"><a href="#" target=_blank>更多>></a></li>
		</ul>
		<div class='con' id='con2'>
		</div>
	</div>
<div style="display:none">	
	<div id="div2_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div2_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div2_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div2_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
</div>
<script>
init('nav2','con2',"div2_",5);
</script>

<div class='tab'>
		<ul id='nav3' class='menu'><li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="more" style="width:160px"><a href="#" target=_blank>更多>></a></li>
		</ul>
		<div class='con' id='con3'>
		</div>
	</div>
<div style="display:none">	
	<div id="div3_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div3_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div3_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
</div>
<script>
init('nav3','con3',"div3_",10);
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

sundoo

初级会员

帖子: 46
体力: 102
威望: 0
当前: 广东深圳
离线: 8 天

71^# 大中小发表于 2008-6-5 17:36

楼上的强人，强烈收藏中……

TOP

rocpeng

鹏翼飞羽

初级会员

帖子: 71
体力: 131
威望: 0
当前: 北京海淀区
离线: 30 天

72^# 大中小发表于 2008-6-30 11:23

谢谢68楼兄弟修改。

TOP

yangsongmao

中级会员

帖子: 202
体力: 499
威望: 0
当前: 北京朝阳区

专长 前端制作

73^# 大中小发表于 2008-7-8 17:55

ff不好使呀，哎找了

TOP

zuzulu

中级会员

帖子: 151
体力: 342
威望: 0
离线: 7 天

74^# 大中小发表于 2008-7-8 18:03

太牛了，真是了不起啊。。赶紧收着

TOP

yybf

初级会员

帖子: 43
体力: 96
威望: 0
离线: 8 天

75^# 大中小发表于 2008-7-9 16:14

实在是太好了，一直在找这些效果！！

ML5X.CN

TOP