JS树效果

原创 2007年10月10日 17:20:00

<!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" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>树型目录</title>
<style type="text/css">
 <!--
 html,body {height:100%;margin:0;font:12px tahoma,宋体,sans-serif;}
 a {text-decoration:none;}
 a,a:visited {color:#000;background:inherit;}
 
 p {margin:0;padding:0 0 0 18px;}
 p a,p a:visited {color:#00f;background:inherit;}
 
 
 /*树型目录开始*/
 .TreeMenu img.s {cursor:pointer;vertical-align:middle;}
 .TreeMenu ul {padding:0;}
 .TreeMenu li {list-style:none;padding:0;}
 .Closed ul {display:none;}
 .Child img.s {background:none;cursor:default;}
 
 #TreeMenu {float:left;width:200px;height:98%;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}
 #TreeMenu ul {margin:0 0 0 17px;}
 #TreeMenu img.s {width:34px;height:18px;}
 #TreeMenu .Opened img.s {background:url(TreeMenu_img/opened.gif) no-repeat 0 1px;}
 #TreeMenu .Closed img.s {background:url(TreeMenu_img/closed.gif) no-repeat 0 1px;}
 #TreeMenu .Child img.s {background:url(TreeMenu_img/child.gif) no-repeat 13px 2px;}
 /*树型目录结束*/

 -->
</style>
<script type="text/javascript">
<!--
 function Ob(o){
  var o=document.getElementById(o)?document.getElementById(o):o;
  return o;
 }
 function Hd(o) {
  Ob(o).style.display="none";
 }
 function Sw(o) {
  Ob(o).style.display="";
 }
 function ExCls(o,a,b,n){
  var o=Ob(o);
  for(i=0;i<n;i++) {o=o.parentNode;}
  o.className=o.className==a?b:a;
 }
 function TreeMenu(id,TagName0) {
   this.id=id;
   this.TagName0=TagName0==""?"li":TagName0;
   this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);
   this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) {
   this.ClassName0=ClassName0;
   this.ClassName1=ClassName1;
   this.ClassName2=ClassName2;
   this.ImgUrl=ImgUrl || "TreeMenu_img/s.gif";
   this.ImgBlankA ="<img src=/""+this.ImgUrl+"/" class=/"s/" onclick=/"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);/" alt=/"展开/折叠/" />";
   this.ImgBlankB ="<img src=/""+this.ImgUrl+"/" class=/"s/" />";
   for (i=0;i<this.AllNodes.length;i++ ) {
    this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:"";
    this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML;
    }
  }
  this.SetNodes = function (n) {
   var sClsName=n==0?this.ClassName0:this.ClassName1;
   for (i=0;i<this.AllNodes.length;i++ ) {
    this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;
   }
  }
 }
-->
</script>

</head>
<body>

<div class="TreeMenu" id="TreeMenu">

<p><a id="AllOpen" href="#" onclick="MyTreeMenu.SetNodes(0);Hd(this);Sw('AllClose');">全部展开</a><a id="AllClose" href="#" onclick="MyTreeMenu.SetNodes(1);Hd(this);Sw('AllOpen');" style="display:none;">全部折叠</a></p>

<ul>
<li class="Opened"><a href="http://www.gushu.cn/" target="_blank">网站后台管理系统</a>
<!--目录节点开始-->
   <ul>
    <li><a href="#1">111</a>
  <ul>
   <li><a href="#2">222</a>
    <ul>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
    </ul>
   </li>
   <li><a href="#">Web编程</a>
    <ul>
     <li class="Child"><a href="#">Java</a></li><!--Child Node-->
     <li class="Child"><a href="#">.Net</a></li>
     <li class="Child"><a href="#">ASP/VBScript</a></li>
     <li class="Child"><a href="#">PHP</a></li>
     <li class="Child"><a href="#">Perl/Python</a></li>
     <li class="Child"><a href="#">Web综合/开源</a></li>
    </ul>
   </li>
  </ul>
 </li>
 </ul>
<!--目录节点开始-->
</li>
</ul><ul>
<li class="Opened"><a href="http://www.gushu.cn/" target="_blank">网站后台管理系统</a>
<!--目录节点开始-->
   <ul>
    <li><a href="#1">111</a>
  <ul>
   <li><a href="#2">222</a>
    <ul>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
    </ul>
   </li>
   <li><a href="#">Web编程</a>
    <ul>
     <li class="Child"><a href="#">Java</a></li><!--Child Node-->
     <li class="Child"><a href="#">.Net</a></li>
     <li class="Child"><a href="#">ASP/VBScript</a></li>
     <li class="Child"><a href="#">PHP</a></li>
     <li class="Child"><a href="#">Perl/Python</a></li>
     <li class="Child"><a href="#">Web综合/开源</a></li>
    </ul>
   </li>
  </ul>
 </li>    <li><a href="#1">111</a>
  <ul>
   <li><a href="#2">222</a>
    <ul>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
     <li class="Child"><a href="#">333</a></li>
    </ul>
   </li>
   <li><a href="#">Web编程</a>
    <ul>
     <li class="Child"><a href="#">Java</a></li><!--Child Node-->
     <li class="Child"><a href="#">.Net</a></li>
     <li class="Child"><a href="#">ASP/VBScript</a></li>
     <li class="Child"><a href="#">PHP</a></li>
     <li class="Child"><a href="#">Perl/Python</a></li>
     <li class="Child"><a href="#">Web综合/开源</a></li>
    </ul>
   </li>
  </ul>
 </li>
 </ul>
<!--目录节点开始-->
</li>
</ul>
</div>
<script type="text/javascript">
<!--
 var MyTreeMenu=new TreeMenu("TreeMenu","li");
 MyTreeMenu.InitCss("Opened","Closed","Child","TreeMenu_img/s.gif");
-->
</script>
</body>
</html> 

canvas实现一颗树的生长到开花

最近看了一些很牛逼的特效,有位大神用canvas绘制的 梦幻大树,深深的震撼了我,超级厉害,于是我也准备尝试着去实现,可能脑子不够用,总是无法实现他那样的梦幻效果,最终只好退而求其次,实现了下面的这种...
  • u010298576
  • u010298576
  • 2017-08-03 10:20:55
  • 730

【效果】html5给小树浇水,然后树长大的效果

用到的 浇水 /* animation */ .a-swing{-webkit-animation:1s ease...
  • kongjiea
  • kongjiea
  • 2014-08-19 10:06:38
  • 5910

用html5开发随机生成的大树的代码

用html5开发随机生成的大树,你应该没想到40+行代码就可以搞定了吧~接下来就跟大家说说这棵大树是如何在html5开发中实现的。   同样必须要有html容器。新建Index.html,代码如下:...
  • u013347963
  • u013347963
  • 2014-02-14 16:59:47
  • 915

JS树效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" lang="zh-cn">...
  • simon803
  • simon803
  • 2007-10-10 17:20:00
  • 827

Jq实现重叠效果-实现无限级分类树形中js 的折叠效果

案例: 代码实现: 首先,在静态页面导入jq包; 然后,代码实现如下: //获取当前的 a 标签 $('a.zd').click(functio...
  • u011341352
  • u011341352
  • 2015-08-04 09:01:33
  • 2340

js实现权限树的添加权限时的全选全消功能

08年中旬在公司做一个OA系统的“权限管理”模块,做到权限的选择设定功能时,VS框架里的TreeView控件明显没法自己实现全选全消,在网上找了不少有关的JS源码,都不太好用,功能不全,于是,就自己仿...
  • alonghay
  • alonghay
  • 2009-02-17 15:35:00
  • 582

js展开一颗树

Tree View 指令不支持树结构数据源,只支持单层数组。(也许是我没发现,人家可以设置)。我只能把树展开,变成单层数组。然后还要记录已经递归到第一层了。比如这样。         ...
  • qq_15980201
  • qq_15980201
  • 2017-10-23 14:50:12
  • 81

网站建设第三步 修改<em>生成</em>的首页

node_modules\\gulp-rev-collector\\index.<em>js</em> 立即下载 上传者: github_39051926...C#<em>生成</em>Gif动态验证码(源代码) 立即下载 上传者: 小草旁的<em>大树</em> 时间: 2012-...
  • 2018年04月12日 00:00

js动态树菜单(只供参考)

  • 2009年11月04日 10:23
  • 4KB
  • 下载

[转载]超全的JS树形菜单(有效果图)

今天在网上看到一个很全的树形菜单,本人觉得很不错,所以就转载了它,希望对有需要的同仁有帮助 JS树形菜单是很常用的JS特效代码,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套...
  • dengsilinming
  • dengsilinming
  • 2012-09-13 12:33:56
  • 6850
收藏助手
不良信息举报
您举报文章:JS树效果
举报原因:
原因补充:

(最多只允许输入30个字)