打印

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

sugar999

新手上路

帖子: 2
体力: 9
威望: 0
离线: 2 天

31^# 大中小发表于 2007-9-27 18:34

很不错的效果，谢谢！！

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

imlihan

初级会员

帖子: 33
体力: 76
威望: 0
离线: 310 天

32^# 大中小发表于 2007-9-28 00:49

支持曾经一度找它, 不过现在觉得它的体积太大了影响速度哇..

www.zhihui1.cn

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

caiying2007 [楼主]

版主

帖子: 2640
体力: 5036
威望: 10

33^# 大中小发表于 2007-10-3 19:39

选项卡-仿雅虎高级选项卡

还是看附件吧

[ 本帖最后由 caiying2007 于 2007-10-3 19:44 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP

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

caiying2007 [楼主]

版主

帖子: 2640
体力: 5036
威望: 10

34^# 大中小发表于 2007-10-12 10:25

有朋友索要打包，在此一并答复，恭请下载

说明：5）多点调用，各点激发事件不同，可以是onClick或onmouseover，可以分别设定打开页面时是否展开及初始为第几标签显示

[ 本帖最后由 caiying2007 于 2007-10-16 04:46 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP

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

烟消云散

银牌会员

帖子: 361
体力: 1287
威望: 16
当前: 北京西城区
离线: 6 天

35^# 大中小发表于 2007-10-15 09:35

好东西。顶起来支持一下~~~~

寂寞地铁

TOP

DWer

初级会员

帖子: 29
体力: 65
威望: 0
离线: 73 天

36^# 大中小发表于 2007-10-15 09:45

ff下没有一个能用的，汗

TOP

oyjp

禁止发言

帖子: 16
体力: 42
威望: 0
离线: 24 天

37^# 大中小发表于 2007-10-15 17:16

<html>
<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
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(){onmousOver(ids,cons,dis);}
		document.getElementById(ids).onmouseout=function(){timer_next=setTimeout(" 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(ids,cons,dis){
clearTimeout(timer_next)
o = o || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
		var id_=obj.parentElement.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_;}
}
}
}
next_d()
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]);
	}
}
timer_next=setTimeout(" next_d()",1000)
}
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

oyjp

禁止发言

帖子: 16
体力: 42
威望: 0
离线: 24 天

38^# 大中小发表于 2007-10-15 17:18

还有就是,当我们的鼠标停止在那一个栏目的时候能不能让他自动停止啊,我所说的是在栏目下的空白点

TOP

hncnw520

初级会员

帖子: 21
体力: 99
威望: 0
当前: 广东东莞
离线: 14 天

39^# 大中小发表于 2007-10-15 17:25

所有的浏览器都能支持就好了

Www.86Lo.Com

TOP

caiying2007 [楼主]

版主

帖子: 2640
体力: 5036
威望: 10

40^# 大中小发表于 2007-10-16 04:26

回复 #37 oyjp 的帖子

TOP

caiying2007 [楼主]

版主

帖子: 2640
体力: 5036
威望: 10

41^# 大中小发表于 2007-10-16 04:35

回复 #38 oyjp 的帖子

<html>
<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
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(){onmousOver(ids,cons,dis);}
		document.getElementById(ids).onmouseout=function(){timer_next=setTimeout(" 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++
	document.getElementById(cons).onmouseover=function(){clearTimeout(timer_next);}
	document.getElementById(cons).onmouseout=function(){timer_next=setTimeout(" next_d()",1000);}
}
function onmousOver(ids,cons,dis){
clearTimeout(timer_next)
o = o || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
		var id_=obj.parentElement.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_;}
}
}
}
next_d()
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]);
	}
}
timer_next=setTimeout(" next_d()",1000)
}
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>

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

[ 本帖最后由 caiying2007 于 2007-10-16 04:42 编辑 ]

TOP

caiying2007 [楼主]

版主

帖子: 2640
体力: 5036
威望: 10

42^# 大中小发表于 2007-10-16 04:50

感谢#38 oyjp 的提醒,上面作了答复,并将#34的打包(4）多点调用_各自循环.rar)作了更新

再次感谢

TOP

holyli

银牌会员

帖子: 417
体力: 1038
威望: 0

43^# 大中小发表于 2007-10-16 10:26

楼主,实在是太感谢你了.

先天下
www.xiantianxia.cn
www.futuremall.cn

TOP

binghexijian

中级会员

帖子: 177
体力: 379
威望: 0
当前: 福建泉州
离线: 37 天

44^# 大中小发表于 2007-10-16 11:57

能不能做到像msn的“今日焦点”那样，淡入淡出

http://www.hiqz.net

TOP

chenjing1121

新手上路

帖子: 16
体力: 36
威望: 0
当前: 河北石家庄
离线: 7 天

45^# 大中小发表于 2007-10-16 12:23

真是高手啊

TOP

frankhy200

中级会员

帖子: 124
体力: 272
威望: 0
当前: 上海黄浦
离线: 150 天

46^# 大中小发表于 2007-10-16 15:26

做个记号，希望下次来，就可以用ff浏览了

TOP

oyjp

禁止发言

帖子: 16
体力: 42
威望: 0
离线: 24 天

47^# 大中小发表于 2007-10-16 20:45

楼主能不能把你这个更改成这个一样的可以用FF的来访问啊

我想很多朋友都需要这个的

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Semiall.com</title>
<link href="http://www.semiall.com/template/semiall_v2img/public.css" rel="stylesheet" type="text/css" />
<link href="http://www.semiall.com/template/semiall_v2img/index.css" rel="stylesheet" type="text/css" />
</head>
<script language="javascript" type="text/javascript">

</script>
<body>
<div id="index_yp">
  
    <div id="yp_card1" style="display:block">    
      <div class="index_yp_card">
        <div class="yp_card_0">推荐</div>
        <div onmouseover="javascript:changeMc('yp_card1','yp_card2')" class="yp_card_3">生产</div>
        <div onmouseover="javascript:changeMc('yp_card1','yp_card3')" class="yp_card_3">贸易</div>
        <div onmouseover="javascript:changeMc('yp_card1','yp_card4')" class="yp_card_3">服务</div>
        <div onmouseover="javascript:changeMc('yp_card1','yp_card5')" class="yp_card_5">综合</div>
      </div>
      <div class="index_yp_main">
        <div class="yp_main_content">
          <dt class="color_a_company"><a href="#">上海安平静电技术合作公司</a></dt>
          <dd class="color_a_666"><a href="#">贸易型</a> | 注册资金50万 | <span class="color_red">认证<img src="http://www.semiall.com/template/semiall_v2img/yp_yeschecked.png" width="12" height="13" align="absmiddle"/></span></dd>
        </div>
        <div class="yp_main_content">
          <dt class="color_a_company"><a href="#">上海安平静电技术合作公司</a></dt>
          <dd class="color_a_666"><a href="#">贸易型</a> | 注册资金50万 | <span class="color_red">认证<img src="http://www.semiall.com/template/semiall_v2img/yp_yeschecked.png" width="12" height="13" align="absmiddle"/></span></dd>
        </div>
        <div class="yp_main_content">
          <dt class="color_a_company"><a href="#">上海安平静电技术合作公司</a></dt>
          <dd class="color_a_666"><a href="#">贸易型</a> | 注册资金50万 | <span class="color_red">认证<img src="http://www.semiall.com/template/semiall_v2img/yp_yeschecked.png" width="12" height="13" align="absmiddle"/></span></dd>
        </div>
        <div class="yp_main_content">
          <dt class="color_a_company"><a href="#">上海安平静电技术合作公司</a></dt>
          <dd class="color_a_666"><a href="#">贸易型</a> | 注册资金50万 | <span class="color_red">认证<img src="http://www.semiall.com/template/semiall_v2img/yp_yeschecked.png" width="12" height="13" align="absmiddle"/></span></dd>
        </div>
        <div class="yp_main_content">
          <dt class="color_a_company"><a href="#">上海安平静电技术合作公司</a></dt>
          <dd class="color_a_666"><a href="#">贸易型</a> | 注册资金50万 | <span class="color_red">认证<img src="http://www.semiall.com/template/semiall_v2img/yp_yeschecked.png" width="12" height="13" align="absmiddle"/></span></dd>
        </div>
<div class="yp_main_list">Tips: 企业登陆 如何认证 我要推荐</div>
      </div>
    </div>
  
  
    <div id="yp_card2" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="javascript:changeMc('yp_card2','yp_card1')" class="yp_card_1">推荐</div>
        <div class="yp_card_2">生产</div>
        <div onmouseover="javascript:changeMc('yp_card2','yp_card3')" class="yp_card_3">贸易</div>
        <div onmouseover="javascript:changeMc('yp_card2','yp_card4')" class="yp_card_3">服务</div>
        <div onmouseover="javascript:changeMc('yp_card2','yp_card5')" class="yp_card_5">综合</div>
      </div>
      <div class="index_yp_main">生产</div>
    </div>
  
  
    <div id="yp_card3" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="javascript:changeMc('yp_card3','yp_card1')" class="yp_card_1">推荐</div>
        <div onmouseover="javascript:changeMc('yp_card3','yp_card2')"class="yp_card_6">生产</div>
        <div class="yp_card_2">贸易</div>
        <div onmouseover="javascript:changeMc('yp_card3','yp_card4')" class="yp_card_3">服务</div>
        <div onmouseover="javascript:changeMc('yp_card3','yp_card5')" class="yp_card_5">综合</div>
      </div>
      <div class="index_yp_main">贸易</div>
    </div>
  
  
    <div id="yp_card4" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="javascript:changeMc('yp_card4','yp_card1')" class="yp_card_1">推荐</div>
        <div onmouseover="javascript:changeMc('yp_card4','yp_card4')" class="yp_card_6">生产</div>
        <div onmouseover="javascript:changeMc('yp_card4','yp_card3')" class="yp_card_6">贸易</div>
        <div class="yp_card_2">服务</div>
        <div onmouseover="javascript:changeMc('yp_card4','yp_card5')" class="yp_card_5">综合</div>
      </div>
      <div class="index_yp_main">服务</div>
    </div>
  
  
    <div id="yp_card5" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="javascript:changeMc('yp_card5','yp_card1')" class="yp_card_1">推荐</div>
        <div onmouseover="javascript:changeMc('yp_card5','yp_card2')" class="yp_card_6">生产</div>
        <div onmouseover="javascript:changeMc('yp_card5','yp_card3')" class="yp_card_6">贸易</div>
        <div onmouseover="javascript:changeMc('yp_card5','yp_card4')" class="yp_card_6">服务</div>
        <div class="yp_card_4">综合</div>
      </div>
      <div class="index_yp_main">综合</div>
    </div>
  
</div>
</body>
</html>

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

TOP

caiying2007 [楼主]

版主

帖子: 2640
体力: 5036
威望: 10

48^# 大中小发表于 2007-10-17 23:09

回复 #47 oyjp 的帖子

1)不知是不是这样(循环效果:)
2)不知FF是否有效(我没有安装FF,如果无效请高手)

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Semiall.com</title>
<link href="http://www.semiall.com/template/semiall_v2img/public.css" rel="stylesheet" type="text/css" />
<link href="http://www.semiall.com/template/semiall_v2img/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="index_yp">
  
    <div id="yp_card1" style="display:block">    
      <div class="index_yp_card">
        <div onmouseover="changeMc(1,1)" onmouseout="hi()" class="yp_card_0">推荐</div>
        <div onmouseover="changeMc(1,2)" onmouseout="hi()" class="yp_card_3">生产</div>
        <div onmouseover="changeMc(1,3)" onmouseout="hi()" class="yp_card_3">贸易</div>
        <div onmouseover="changeMc(1,4)" onmouseout="hi()" class="yp_card_3">服务</div>
        <div onmouseover="changeMc(1,5)" onmouseout="hi()" class="yp_card_5">综合</div>
      </div>
      <div onmouseover="changeMc(1,1)" onmouseout="hi()" class="index_yp_main">推荐(循环周期(1秒))</div>
    </div>
  
  
    <div id="yp_card2" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="changeMc(2,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
        <div onmouseover="changeMc(2,2)" onmouseout="hi()" class="yp_card_2" >生产</div>
        <div onmouseover="changeMc(2,3)" onmouseout="hi()" class="yp_card_3">贸易</div>
        <div onmouseover="changeMc(2,4)" onmouseout="hi()" class="yp_card_3">服务</div>
        <div onmouseover="changeMc(2,5)" onmouseout="hi()" class="yp_card_5">综合</div>
      </div>
      <div onmouseover="changeMc(2,2)" onmouseout="hi()" class="index_yp_main">生产(循环周期(1秒))</div>
    </div>
  
  
    <div id="yp_card3" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="changeMc(3,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
        <div onmouseover="changeMc(3,2)" onmouseout="hi()"class="yp_card_6">生产</div>
        <div onmouseover="changeMc(3,3)" onmouseout="hi()" class="yp_card_2">贸易</div>
        <div onmouseover="changeMc(3,4)" onmouseout="hi()" class="yp_card_3">服务</div>
        <div onmouseover="changeMc(3,5)" onmouseout="hi()" class="yp_card_5">综合</div>
      </div>
      <div onmouseover="changeMc(3,3)" onmouseout="hi()" class="index_yp_main">贸易(循环周期(1秒))</div>
    </div>
  
  
    <div id="yp_card4" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="changeMc(4,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
        <div onmouseover="changeMc(4,2)" onmouseout="hi()" class="yp_card_6">生产</div>
        <div onmouseover="changeMc(4,3)" onmouseout="hi()" class="yp_card_6">贸易</div>
        <div onmouseover="changeMc(4,4)" onmouseout="hi()" class="yp_card_2">服务</div>
        <div onmouseover="changeMc(4,5)" onmouseout="hi()" class="yp_card_5">综合</div>
      </div>
      <div onmouseover="changeMc(4,4)" onmouseout="hi()" class="index_yp_main">服务(循环周期(1秒))</div>
    </div>
  
  
    <div id="yp_card5" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="changeMc(5,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
        <div onmouseover="changeMc(5,2)" onmouseout="hi()" class="yp_card_6">生产</div>
        <div onmouseover="changeMc(5,3)" onmouseout="hi()" class="yp_card_6">贸易</div>
        <div onmouseover="changeMc(5,4)" onmouseout="hi()" class="yp_card_6">服务</div>
        <div onmouseover="changeMc(5,5)" onmouseout="hi()" class="yp_card_4">综合</div>
      </div>
      <div onmouseover="changeMc(5,5)" onmouseout="hi()" class="index_yp_main">综合(循环周期(1秒))</div>
    </div>
  
</div>
<script language="javascript" type="text/javascript">

</script>
</body>
</html>

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

[ 本帖最后由 caiying2007 于 2007-10-17 23:12 编辑 ]

TOP

hkin2002

新手上路

帖子: 21
体力: 39
威望: 0
当前: 北京朝阳区
离线: 3 天

49^# 大中小发表于 2007-10-21 18:00

引用:

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

FF下有效

TOP

520css

初级会员

帖子: 62
体力: 125
威望: 0
离线: 66 天

50^# 大中小发表于 2008-1-13 05:21

上面那些红色、圆角的也弄个FF兼容的吧

最后这个按钮的效果不那么美观！

TOP

520css

初级会员

帖子: 62
体力: 125
威望: 0
离线: 66 天

51^# 大中小发表于 2008-1-13 05:22

但能自动转换效果确实不错

TOP

e4

初级会员

帖子: 49
体力: 84
威望: 0
离线: 7 天

52^# 大中小发表于 2008-1-13 10:59

引用:

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

Semiall.com




      推荐
      生产
      贸易
      服务
...

所有效效果在FF下均有效，FF下回帖

TOP

shaohua162001

荷西

高级会员

帖子: 858
体力: 724
威望: 1
当前: 北京海淀区
离线: 4 天

专长 网页设计,前端制作

53^# 大中小发表于 2008-1-30 14:36

引用:

原帖由 caiying2007 于 2007-10-12 10:25 发表
有朋友索要打包，在此一并答复，恭请下载
说明：5）多点调用，各点激发事件不同，可以是onClick或onmouseover，可以分别设定打开页面时是否展开及初始为第几标签显示

确实是好东西鉴定完毕

TOP

haocat

初级会员

帖子: 107
体力: 157
威望: 0
当前: 陕西西安
离线: 3 天

专长 网页设计,JS,PHP

54^# 大中小发表于 2008-2-17 22:12

可惜

引用:

原帖由 weili 于 2007-8-20 14:10 发表
实不相瞒，这么多个在火狐下都无用！有问题

可惜!

绝世※好猫

TOP

arthuridea

新手上路

帖子: 19
体力: 38
威望: 0
当前: 北京海淀区
离线: 29 天

55^# 大中小发表于 2008-3-14 17:01

真漂亮。。。
兼容性问题：在onmouseOver的参数列表里加上个o，
function onmousOver(ids,cons,dis,o){//...} 这样
然后调用的部分改成
document.getElementById(ids).onclick=function(e){onmousOver(ids,cons,dis,e);}//点击激发效果
}
就可以兼容FF了。

TOP

llying

新手上路

帖子: 9
体力: 24
威望: 0
离线: 7 天

56^# 大中小发表于 2008-3-19 09:03

严重的不支持ff~！
那位高手来个解决之道~！

TOP

dxjinf

新手上路

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

57^# 大中小发表于 2008-3-19 20:44

不错。。顶一下。。。

不过都不支持FF。。。太可惜了。。。

TOP

doggic

初级会员

帖子: 70
体力: 145
威望: 0
当前: 广西桂林
离线: 3 天

58^# 大中小发表于 2008-4-17 11:39

蛮漂亮的
收藏了

TOP

yqlb

初级会员

帖子: 25
体力: 54
威望: 0
离线: 17 天

59^# 大中小发表于 2008-4-17 14:08

48楼有效