您现在浏览：主页>网页设计>网页特效> 选项卡特效代码:多点调用_各自循环教程

选项卡特效代码:多点调用_各自循环

时间:2007-09-09 16:44:11 来源: 作者:

<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('/teixiao/UploadFiles_4612/200709/20070906071212152.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('/teixiao/UploadFiles_4612/200709/20070906071212190.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>

Tags：各自循环代码特效 id class kk obj_temp

网友评论加入收藏打印本文我要推荐博客留言关闭此页

文章评论

共有 0人发表了评论查看完整内容

完全教程网：WWW.PCSTU.COM

选项卡特效代码:多点调用_各自循环

文章评论

相关教程

推荐教程

最新教程