javascript實現多欄閉合展開式廣告位菜單效果實例

更新時間：2015年08月05日 17:27:20 作者：皮蛋

這篇文章主要介紹了javascript實現多欄閉合展開式廣告位菜單效果,可實現類似手風琴切換展示效果的功能,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了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程序設計有所幫助。

您可能感興趣的文章: