本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
