回味一下——仿2008QQ面板导航
生活随笔
收集整理的這篇文章主要介紹了
回味一下——仿2008QQ面板导航
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
走過了2010，一直以來，QQ伴隨著我們這一代人的成長。依然記得高中時候在機房上信息課時，背著老師偷偷著帶勁兒聊著Q。那會兒，網聊是一種時尚，更是潮流。記得有過飄云版，有過珊瑚蟲版，還有顯IP的彩虹版。后來的08,09,10版功能不斷更新，界面愈加友好，可我們已經習慣了隱身，習慣了沉默。 塵封的日子消逝，逝去的年華不再！亦人，亦物。還有多少記得08版的QQ面板？想起了我們TeamOne小組那會兒的日子^^?
?
仿2008面析導航? <html xmlns="http://www.w3.org/1999/xhtml"><!-- TeamOne小組 2009-4-16 -->
<head>
<style type="text/css">
.titleStyle{
background-color:#008800;color:#ffffff;
border-top:1px solid #FFFFFF;font-size:9pt;cursor:hand;
}
.contentStyle{
background-color:#eeffee;color:blue;font-size:9pt;
}
</style>
<title>js導航圖片滑動效果</title></head>
<body>
<script type="text/javascript">
<!--
var layerTop=20; //菜單頂邊距
var layerLeft=30; //菜單左邊距
var layerWidth=140; //菜單總寬度
var titleHeight=20; //標題欄高度
var contentHeight=200; //內容區高度
var stepNo=10; //移動步數，數值越大移動越慢
var itemNo=0;
//建立一個名為"itemsLayer"的層，用它限制所有菜單的顯示范圍：
document.write('<span id=itemsLayer style="position:absolute; overflow:hidden;border:1px;solid #008800;left:'+ layerLeft+';top:'+layerTop+';width:'+layerWidth+';">');
function addItem(itemTitle,itemContent){
//這個函數準備接受菜單標題和內容的寫入
//新增菜單的頂點剛好在上一菜單的標題欄以下，尺寸由一開始便聲明的變量決定
itemHTML='<div id=item'+itemNo+' itemIndex='+itemNo+'style="position:relative;left:0;top:'+(-contentHeight*itemNo)+';width:'+layerWidth+';">'+'<table width=100% cellspacing="0" cellpadding="0">'+ '<tr><td height='+titleHeight+' οnclick=changeItem('+itemNo+') class="titleStyle" align=center>'+itemTitle+'</td></tr>'+'<tr><td height='+contentHeight+' class="contentStyle">'+itemContent+'</td></tr> </table></div>';
document.write(itemHTML);
itemNo++;
}
//這時便可以把菜單標題和內容作為參數調用以上函數了：
//可以添加任意多項，格式參照以下幾行：
addItem('歡迎','<center><BR>歡迎光臨個人樂園！</center>');
addItem('焦點動態','<center><a href="#">項目1</a> <BR><BR><a href="#">項目2</a> <BR><BR><a href="#">項目3</a> <BR><BR><a href="#">更多..</a></center>');
addItem('美工教室','<center><a href="#">項目</a> <BR><BR><a href="#">項目</a> <BR><BR><a href="#">項目</a> <BR><BR><a href="#">更多..</a></center>');
addItem('Flash','<center><a href="#">項目</a> <BR><BR><a href="#">項目</a> <BR><BR><a href="#">項目</a> <BR><BR><a href="#">更多..</a></center>');
addItem('多媒體','<center><a href="#">項目</a> <BR><BR><a href="#">項目</a> <BR><BR><a href="#">項目</a> <BR><BR><a href="#">更多..</a></center>');
addItem('精品賞析','<center><a href="#">設計精品</a></center>');
document.write('</span>'); //結束"itemsLayer"層
//下面一式計算"itemsLayer"層的高度：
document.all.itemsLayer.style.height =itemNo*titleHeight+contentHeight;
//現在開始編寫點擊標題時移動相應的層：
//初始化變量"toItemIndex"和"onItemIndex"，
//它們分別用于記錄"應該顯示的層"和"現在顯示的層":
var toItemIndex=itemNo-1;
var onItemIndex=itemNo-1;
var runtimes=0; //"runtimes"用于記錄層移動次數
//菜單標題被點擊時調用這個函數：
function changeItem(clickItemIndex){
//判斷相應的層應上移還是下移：
toItemIndex=clickItemIndex;
if(toItemIndex-onItemIndex>0) moveUp(); else moveDown();
//一定的時間間隔后繼續移動，直到移了設定的步數stepNo:
runtimes++;
if(runtimes>=stepNo){
onItemIndex=toItemIndex;
runtimes=0;}
else
setTimeout("changeItem(toItemIndex)",10);
}
//相應菜單上移：
function moveUp(){
//判斷應一起上移的菜單，并讓它(們)每次移動contentHeight/stepNo的距離：
for(i=onItemIndex+1;i<=toItemIndex;i++)
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)-contentHeight/stepNo;');
}
//相應菜單下移：
function moveDown(){
for(i=onItemIndex;i>toItemIndex;i--)
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)+contentHeight/stepNo;');
}
changeItem(0); //把第一個菜單作為默認顯示
//-->
</script>
</body>
</html>
源件下載：
轉載于:https://www.cnblogs.com/facing/archive/2011/01/27/1946498.html
總結
以上是生活随笔為你收集整理的回味一下——仿2008QQ面板导航的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 初探QQ空间本地安全问题！
- 下一篇： 2008QQ皮肤