javascript实现卡片式效果-优快云博客

2008年05月05日星期一 14:52
main.htm
------------------------- 
    <iframe id="box" width="100%" height="100%" frameborder="0" name="box" src="index.aspx" οnlοad="javascript:linkbox.addlink(box.document.title,box.document.location);"></iframe>
     <iframe id="linkbox" width="100%" height="16" frameborder="no" name="linkbox" src="link.htm"></iframe>

-----------------------
link.htm
-----------------------
<html>
<head>
    <title>LinkTabs Page</title>
    <style type="text/css">
    .currHome
    {
padding-left: 15px;
padding-top: 2px;
padding-bottom: 2px;
background-image: url('../images/tab_curr_home.gif');
background-repeat: no-repeat;
background-position: left;
font-size: 9pt;
color: #3A4663;
text-decoration: none;
font-family: 宋体, Arial, Helvetica, sans-serif;
}
    
    .currLink
    {
   padding-left: 15px;
   padding-top: 2px;
   padding-bottom: 2px;
   background-image: url('../images/tab_curr.gif');
   background-repeat: no-repeat;
   background-position: left;
   font-size: 9pt;
   color: #3A4663;
   text-decoration: none;
   font-family: 宋体, Arial, Helvetica, sans-serif;
} 
.currNext
     {
padding-left: 15px;
padding-top: 2px;
padding-bottom: 2px;
background-image: url('../images/tab_currNext.gif');
background-repeat: no-repeat;
background-position: left;
font-size: 9pt;
color: #3A4663;
text-decoration: none;
font-family: 宋体, Arial, Helvetica, sans-serif;
}
.normHome
     {
padding-left: 15px;
padding-top: 2px;
padding-bottom: 2px;
background-image: url('../images/tab_norm_home.gif');
background-repeat: no-repeat;
background-position: left;
font-size: 9pt;
color: #3A4663;
text-decoration: none;
font-family: 宋体, Arial, Helvetica, sans-serif;
}
.normLink
     {
padding-left: 15px;
padding-top: 2px;
padding-bottom: 2px;
background-image: url('../images/tab_norm.gif');
background-repeat: no-repeat;
background-position: left;
font-size: 9pt;
color: #3A4663;
text-decoration: none;
font-family: 宋体, Arial, Helvetica, sans-serif;
}
    .currEnd
    {
    padding-left:15px;
     padding-top:2px;
    padding-bottom:2px;
       background-image:url('../images/tab_curr_end.GIF');
     background-repeat:no-repeat;
     background-position:left;
    font-size: 9pt; 
     color: #9CB6DB; 
        text-decoration: none;
   font-family: 宋体, Arial, Helvetica, sans-serif;
}
    .normEnd
    {
padding-left: 15px;
padding-top: 2px;
padding-bottom: 2px;
background-image: url('../images/tab_norm_end.GIF');
background-repeat: no-repeat;
background-position: left;
font-size: 9pt;
color: #9CB6DB;
text-decoration: none;
font-family: 宋体, Arial, Helvetica, sans-serif;
} 

    </style>

    <script language="javascript" type="text/javascript">
   var tab_array = new Array();//链接数组
   var tab="";
   var currIndex=-1;//当前项
   var startIndex=0;//开始显示项
  
   function addlink(title,link)
   {
    if (title.indexOf(" - ")>-1)
     title=title.split(" - ")[1];
   
    currIndex=-1;
    for(i=0;i<tab_array.length;i++)
    {
     if (tab_array[i]==title+","+link)
      currIndex=i;
    }
    if (currIndex==-1)//经上面检查没有在数组中为新链接.
    {
     //如果不等于主页的地址
     if (link!=document.location.toString().substring(0,document.location.toString().length-8)+"index.aspx")
     {
      if (tab_array.length>30)
      {
       tab_array=tab_array.reverse();
       tab_array.pop();
       tab_array=tab_array.reverse();     
      }
      //添加新链接
         tab_array.push(title+","+link);
         currIndex=tab_array.length-1;
         //重置开始显示项startIndex
         resetStartIndex(currIndex);
        }
     }
     buildTab();
   }
   //重置开始显示项startIndex（当前项currIndex在未尾）
   function resetStartIndex(currIndex)
   {
    //卡片区的宽
    var cardw=document.body.clientWidth-(17+16+16+16)-(15+24)-20;
    //显示的卡片的宽
    var tabsw=0;
    //从后往前算
    for(i=currIndex;i>-1;i--)
    { 
       title=tab_array[i].split(",")[0];
       link=tab_array[i].split(",")[1];
     if (tabsw+title.length*12<cardw)
     {
      startIndex=i;
      tabsw+=(title.length*12)+15;//15这卡片样式中padding-Left
     }
     else
      i=-1;//跳出
    }
   }
function buildTab()
{
   var title="主页";
   var link="index.aspx";
     card.innerHTML="";
     
     if (currIndex==-1)
     card.innerHTML+="<a href='"+link+"' target='box' class='currHome'>"+title+"</a>";
   else
    card.innerHTML+="<a href='"+link+"' target='box' class='normHome'>"+title+"</a>";
  
   //卡片区宽
   var cardw=document.body.clientWidth-(17+16+16+16)-(15+24)-20;
   //可显示的卡片宽
   var tabsw=0;
   //显示的卡片数
   var tabNum=0;
   //从要显示的项开始算
   for(i=startIndex;i<tab_array.length;i++)
   { 
      title=tab_array[i].split(",")[0];
      link=tab_array[i].split(",")[1];
    if (tabsw+title.length*12+15<cardw)
    {
     if (currIndex==tabNum+startIndex)
      card.innerHTML+="<a href='"+link+"' target='box' class='currLink'>"+title+"</a>";
     else if ((currIndex+1==tabNum+startIndex)||((currIndex==-1) && (tabNum==0)) )   
      card.innerHTML+="<a href='"+link+"' target='box' class='currNext'>"+title+"</a>";
     else
      card.innerHTML+="<a href='"+link+"' target='box' class='normLink'>"+title+"</a>"; 
     tabsw+=title.length*12+15;//15为卡片样式中的padding-Left
     tabNum+=1;
    }
    else
     i=tab_array.length;//跳出
    }
    if (currIndex==startIndex+tabNum-1)
       card.innerHTML+="<span class='currEnd' >&nbsp;</span>";
    else
       card.innerHTML+="<span class='normEnd' >&nbsp;</span>";
}
function firstArrowOnclick()
{
   startIndex=0;
   buildTab();
}
function forwardArrowOnclick()
{
   if (startIndex>0)
   {
    startIndex-=1;
    buildTab();
   }
}
function nextArrowOnclick()
{
   if (startIndex<tab_array.length-1)
   {
    startIndex+=1;
    buildTab();
   }
}
function endArrowOnclick()
{
   if (tab_array.length>0)
   {
    startIndex=tab_array.length-1;
    buildTab();
   }
}
    </script>

</head>
<body scroll="no" style="margin:0px;" bgcolor="#9CB6DB">
    
    
<table style="width: 100%" cellspacing="0" cellpadding="0">
   <tr>
    <td width="33">   
    <img οnclick="firstArrowOnclick();" alt="第一个" src="../images/firstArrow.gif" width="17" height="15" style="cursor:hand" /><img οnclick="forwardArrowOnclick();" alt="前一个" src="../images/forwardArrow.gif" width="16" height="15" style="cursor:hand;" /></td>
    <td>
     <div id="card" style=" background-color: #9CB6DB; ">
        </div>
       </td>
    <td width="32">   
    <img οnclick="nextArrowOnclick();" alt="下一个" src="../images/nextArrow.gif" width="16" height="15" style="cursor:hand;" /><img οnclick="endArrowOnclick();" alt="最后一个" src="../images/endArrow.gif" width="16" height="15" style="cursor:hand" /></td>
   </tr>
</table>
    &nbsp;
    
</body>
</html>