dede超链接滑动分类效果

来源：互联网发布：算法式和启发式编辑：程序博客网时间：2024/05/18 10:40

</script>

上边两个JS缺一不可，把他们同时加入页面<head></head>即可,然后在<body></body>中加入如下代码调用：

<div class="flink w960 center clear">
<dl class="tbox">
<dt> <strong>友情链接</strong>
   <span class="linklabel">
       {dede:flinktype}
           <a href="#" _for="flink_[field:id/]">[field:typename/]</a>
       {/dede:flinktype}
   </span>
   <span class="more"> <a href="plus/flink.php">所有链接</a> | <a href="plus/flink_add.php">申请加入</a> </span> </dt>
{dede:flinktype }
<dd id="flink_[field:id/]">
    <ul class="f5">
       {dede:flink/}
    </ul>
</dd>
{/dede:flinktype}
</dl>
</div>

附上CSS：

/*---------- stock ---------*/
.w960{
   width:990px;
   /*position:relative;*/
}
.center{
   margin:0px auto;
}
.clear{
   overflow:hidden;
}
.tbox{
   margin:0 0 8px 0;
   border-bottom:1px solid #DADADA;
   overflow:hidden;
   background:url(../images/green_skin.png) 0 -294px repeat-x;
}
.tbox dt{
   height:24px;
   border:1px solid #DADADA;
   overflow:hidden;
   clear:both;
}
.tbox dd{
   border-left:1px solid #DADADA;
   border-right:1px solid #DADADA;
   /*padding:4px 4px 0px;*/
   overflow:hidden;
}

.tbox dt strong{
   height:24px;
   line-height:24px; !important;line-height:25px;
   padding-left:8px;
   padding-right:4px;
   display:block;
   float:left;
   color:#316301;
   letter-spacing:1px;
}
.tbox dt strong a{
   color:#316301;
}
.tbox dt strong a:hover{
   color:#596F37;
   text-decoration:none;
}
.tbox dt span.more{
   float:right;
   position:relative;
   line-height:25px;
   padding-right:8px;
   color:#596F37;
}
.tbox dt span.more a{
   color:#596F37;
   text-decoration:none;
}
.tbox dt span.more a:hover{
   color:#ff3333;
   text-decoration:underline;
}
.tbox dt span.label{
   height:25px;
   float:right;
   overflow:hidden;
   padding-right:1px;
   padding-top:2px;
}
.tbox dt span.label a{
   height:26px;
   display:block;
   padding:0px 7px 0px 8px;
   line-height:26px;
   border-left:1px solid #DADADA;
   float:left;
   color:#666;
   text-decoration:none;
   overflow:hidden;
   letter-spacing:1px;
}
.tbox dt span.label a:hover{
   color:#360;
}
.tbox dt span.label a.thisclass{
   background:#FFF;
   color:#333;
   border-top:3px solid #DADADA;
}

.tbox dt span.linklabel{
   float:left;
   margin-left:10px;
   overflow:hidden;
   padding-right:1px;
   padding-top:2px;
}
.tbox dt span.linklabel a{
   height:20px;
   display:block;
   padding:0px 7px 0px 8px;
   margin:0 5px;
   line-height:20px;
   border-left:1px solid #DADADA;
   border-top:1px solid #DADADA;
   border-right:1px solid #DADADA;
   float:left;
   color:#666;
   text-decoration:none;
   overflow:hidden;
   letter-spacing:1px;
}
.tbox dt span.linklabel a:hover{
   color:#360;
}
.tbox dt span.linklabel a.thisclass{
   background:#FFF;
   color:#333;
}
.f5{/*友情链接(文字)专用*/
   width:100%;
   overflow:hidden;
   clear:both;
}

即可。