javascript实现多栏闭合展开式广告位菜单效果实例

2019-11-20 11:54:40

字体：大中小

来源：转载

供稿：网友

本文实例讲述了javascript实现多栏闭合展开式广告位菜单效果。分享给大家供大家参考。具体如下：

从操作方式上来说，有似曾相识的感觉，有点手风琴菜单的味道，像一个折叠面板，用JavaScript和CSS结合来实现，虽然不华丽，但很简洁实用，也算是给喜欢网页特效的朋友们一个可参考素材吧。

运行效果如下图所示：

具体代码如下：

<!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><title>多栏闭合展开式广告位（菜单）</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css"><!--* {margin:0; padding:0; font-size:12px;}ul,li { list-style:none;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{zoom:1;}#dd { width:303px; height:80px; margin:50px auto 0 auto; border:1px solid #ccc; border-right:none; overflow:hidden;}#dd li { float:left; width:50px; height:80px; overflow:hidden;border-right:1px solid #ccc;}#dd li span { width:50px; display:inline-block; text-align:center; line-height:80px;}#dd li p { width:150px; display:inline-block;}#dd li.on { width:200px;}#ii { width:303px; margin:5px auto 0 auto;}#ii li { float:left; width:10px; height:10px; margin:0 1px; background:#ccc; text-align:center; line-height:10px; cursor:pointer;}#ii li.on{ background:#6CF;}--></style></head><body><ul id="dd" class="clearfix"> <li><span>表一</span><p>常用ASP函数大全<br />学习必备资料</p></li> <li><span>表二</span><p>十大jquery特效<br />惊天秘密，不容错过</p></li> <li><span>表三</span><p>Ajax交互改革<br />Ajax带给你空前体验</p></li></ul><ul id="ii" class="clearfix"> <li>1</li> <li>2</li> <li>3</li></ul><script type="text/javascript"><!-- function newSlider(){ var dl=document.getElementById("dd").getElementsByTagName("li"); var il=document.getElementById("ii").getElementsByTagName("li"); var dlen = dl.length; var timer = null,index = 0,autoTime = 3000; //timer定时器，index当前显示的是第几个，autotime自动切换时间 dl[0].className="on",il[0].className="on"; //切换函数 function play(j){  index = j;  stopAuto();//停止计时  for (var i=0;i<dlen ;i++ ){  dl[i].className="";  il[i].className="";  }  dl[j].className="on";  il[j].className="on";  startAuto();//重新开始计时 } //mouseover表切换 for ( var i=0;i<dlen ;i++ ){  dl[i].onmouseover=function(j){  return function(){play(j);}  }(i) } //click按钮切换 for ( var i=0;i<dlen ;i++ ){  il[i].onclick=function(j){  return function(){play(j);}  }(i) } //自动切换开始 function startAuto(){  timer = setInterval(function(){  index++;  index = index>dlen-1?0:index;  play(index);  },autoTime); } //自动切换停止 function stopAuto(){  clearInterval(timer); } //启动自动切换 startAuto() }window.onload=function(){newSlider();}//--></script></body></html>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：js实现网页抽奖实例

下一篇：JavaScript实现可拖拽的拖动层Div实例