网站首页 > 网页设计教程 > 网页特效 > 图片马赛克幻灯片特效代码

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

作者：互联网
时间：2009-06-20 15:16:26

给朋友帮忙,写了几个简单的选项卡，奉献给有需要的朋友
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; <span class="visiblesaf0">li***height:1.5</span>; margin-left:1px; cursor:pointer; background:url('') no-repeat; } .menu .active { width:84px; float:left; font-size:10pt; <span class="visiblesaf0">li***height:1.5</span>; margin-left:1px; cursor:pointer; font-weight:bold; color:#FFFFFF; background:url('') no-repeat; } #more { width:76px; float:left; font-size:10pt; <span class="visiblesaf0">li***height:1.5</span>; 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){ <span class="visiblesaf3">do***ent.getElementById</span>(ids).getElementsByTagName('li')[0].className='active'; <span class="visiblesaf3">do***ent.getElementById</span>(cons).innerHTML=<span class="visiblesaf3">do***ent.getElementById</span>(dis+"l1").innerHTML; // <span class="visiblesaf3">do***ent.getElementById</span>(ids).onmouseover=function(){onmousOver(ids,cons,dis);}//鼠标指向激发效果 <span class="visiblesaf3">do***ent.getElementById</span>(ids).onclick=function(){onmousOver(ids,cons,dis);}//点击激发效果 } function onmousOver(ids,cons,dis){ o = o || <span class="visiblesaf8">wi***w.event</span>; var <span class="visiblesaf9">ob***.target</span> || <span class="visiblesaf10">o.***Element</span>; if (<span class="visiblesaf11">ob***agName==</span>'LI'){ if (<span class="visiblesaf12">ob***lassName==</span>'active'||obj.id=='more')return; var o=<span class="visiblesaf3">do***ent.getElementById</span>(ids).getElementsByTagName('li'); for (var i=0;i<<span class="visiblesaf14">=o***ngth-1</span>;i++){o[i].className='default'} <span class="visiblesaf15">ob***lassName=</span>'active'; if (<span class="visiblesaf12">ob***lassName==</span>'active'){<span class="visiblesaf3">do***ent.getElementById</span>(cons).innerHTML=<span class="visiblesaf3">do***ent.getElementById</span>(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>

上一篇：页面载入的动画效果的源代码一例5

下一篇：页面载入的动画效果的源代码一例

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

相关阅读

最新文章

人气下载推荐

相关应用

热门文章

推荐游戏