公告:如果您的账号不能登录,可能是系统对您账号进行了保护,我们发现系统中存在着不安全密码,故对其重置,请您重新激活账号,对于给您造成的不便,敬请谅解!
论坛风格切换切换到宽版
  • 9623阅读
  • 13回复

dede滑动门效果代码(测试成功) [复制链接]

上一主题 下一主题
离线228520365
 

发帖
100
贡献值
67
威望值
26
技术分
0
织梦币
0
只看楼主 倒序阅读 使用道具 0 发表于: 2010-01-11
今天因为自己要用在DEDE搜索了很多但是都不是那么完美,
以下是本人在网上找的代码经过修改测试成功的代码

<style media="screen" type="text/css">
<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}
/* 标准盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*滑动门的宽度*/}
/* TAB 切换效果 */
.tb_{background-image: url(滑动条背景图片地址); background-repeat: repeat-x;background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/* 控制显示与隐藏css类 */
.normaltab   { background-image:url(滑动条背景图片地址); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab    { background-image: url(滑动条背景图片地址); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
-->
</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签,就将i<=N;
for(var i=1;i<=6;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>
<body>
<div class="w936">
<div id="tb_" class="tb_">
   <ul>
    <li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);">
    问雨</li>
    <li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);">
    问雨</li>
    <li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);">
  问雨</li>
    <li id="tb_4" class="normaltab" onmouseover="o:HoverLi(4);">
    问雨</li>
    <li id="tb_5" class="normaltab" onmouseover="g:HoverLi(5);">
    问雨</li>
    <li id="tb_6" class="normaltab" onmouseover="z:HoverLi(6);">
    问雨</li>
   </ul>
</div>
<div class="ctt">
  <div class="dis" id="tbc_01">
<ul class="d2 ico3">
{dede:arclist titlelen='60' row='10' typeid=8 }
<li><span class="date">[field:pubdate function="GetDateMK(@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist} </div>
  
  <div class="undis" id="tbc_02">
  <ul class="d2 ico3">
{dede:arclist titlelen='60' row='10' typeid=4 }
<li><span class="date">[field:pubdate function="GetDateMK(@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</div>
  <div class="undis" id="tbc_03">
  <ul class="d2 ico3">
{dede:arclist titlelen='60' row='10' typeid=5 }
<li><span class="date">[field:pubdate function="GetDateMK(@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</div>
  <div class="undis" id="tbc_04">
<ul class="d2 ico3">
{dede:arclist titlelen='60' row='10' typeid=7 }
<li><span class="date">[field:pubdate function="GetDateMK(@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</div>
  <div class="undis" id="tbc_05">
  <ul class="d2 ico3">
{dede:arclist titlelen='60' row='10' typeid=9 }
<li><span class="date">[field:pubdate function="GetDateMK(@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</div>
  <div class="undis" id="tbc_06"><ul class="d2 ico3">
{dede:arclist titlelen='60' row='10' typeid=10 }
<li><span class="date">[field:pubdate function="GetDateMK(@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist} </b>
  </div>
</div>
</div>

红色的为滑动的栏目名称
蓝色的是对应滑动下拉框的内容的栏目ID
离线火盾网络

发帖
702
贡献值
213
威望值
118
技术分
0
织梦币
0
只看该作者 1 发表于: 2010-01-11
无图无演示
 
[b]Dede[color=red]模板定制, 二次开发.[color=blue]插件制作[/color][/b] [url=http://wpa.qq.com/msgrd?v=1&uin=690070888&site=qq&menu=yes][img]http://wpa.qq.com/pa?p=2:690070888:47[/img][/url]
离线frogsoft

发帖
919
贡献值
422
威望值
200
技术分
0
织梦币
0
只看该作者 2 发表于: 2010-01-14
到本站来看看。有很多种特效代码
 
离线zgtmh
发帖
126
贡献值
4
威望值
9
技术分
0
织梦币
0
只看该作者 3 发表于: 2010-01-29
麻煩樓主演示一下唄!
离线bulao108
发帖
37
贡献值
10
威望值
15
技术分
0
织梦币
0
只看该作者 4 发表于: 2010-01-29
不错 学习了  好强大啊
离线mjzwl

发帖
266
贡献值
86
威望值
29
技术分
0
织梦币
0
只看该作者 5 发表于: 2010-01-29
发个演示效果地址?
离线浦水

发帖
216
贡献值
11
威望值
26
技术分
0
织梦币
0
只看该作者 6 发表于: 2010-01-29
  无图无真相
无个性不签名
离线yiduzhiya

发帖
122
贡献值
1580
威望值
100
技术分
0
织梦币
0
只看该作者 7 发表于: 2010-02-03
要是有一个演示多好!
<a href="http://www.5ku9.com/">我酷久</a>
离线xing521

发帖
7
贡献值
11
威望值
1
技术分
0
织梦币
0
只看该作者 8 发表于: 2010-02-13
可不可以自动获取栏目或者子栏目,, 这样要一个一个输入。不便于写入摸版啊
离线zszxx

发帖
684
贡献值
815
威望值
188
技术分
0
织梦币
0
只看该作者 9 发表于: 2010-02-13
谢谢楼主分享了。自己测试一下,看可以不
我用织梦建的小站http://www.szyzx.net