图片马赛克幻灯片特效代码

王朝other·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

给朋友帮忙,写了几个简单的选项卡,奉献给有需要的朋友

1)多点调用

<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://www.knowsky.com/upfiles/20070905/20070905212648_01.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://www.knowsky.com/upfiles/20070905/20070905212705_02.jpg') no-repeat;

}

#more

{

width:76px;

float:left;

font-size:10pt;

line-height:1.5;

margin-left:1px;

cursor:pointer;

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(){onmousOver(ids,cons,dis);}//点击激发效果

}

function onmousOver(ids,cons,dis){

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>

<!--#1-->

<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>

<!--#2-->

<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>

<!--#3-->

<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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航