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烟雾效果学习

一、学习背景与效果 前些天翻大神blog,看到了张鑫旭大神写的一篇《canvas图形绘制之星空、噪点与烟雾效果》,深受启发。详细了研究了一下烟雾效果的代码,效果如下: 动态效果请点击。(!-- ...
  • tangxiaolang101
  • tangxiaolang101
  • 2017年03月24日 11:57
  • 617

js实现翻页效果

js实现翻页效果 转自:http://blog.csdn.net/redeagle_gbf/article/details/20044199 分页 ...
  • cai7095576
  • cai7095576
  • 2014年03月10日 20:21
  • 2074

js效果

if点击某标签  {do} if点击空白处  {do} $(function(){ $("点击标签").click(function(event){ var e=window....
  • a114469
  • a114469
  • 2017年06月08日 14:47
  • 60

jQuery烟雾背景发生器(HTML5 Canvas插件waterpipe.js

  • 2014年05月16日 11:20
  • 1.05MB
  • 下载

javascript 实现简单的逐字打印的效果

javascript 实现简单的逐字打印的效果
  • Dailoge
  • Dailoge
  • 2016年08月30日 20:00
  • 1016

js+加载等待效果

加载等待效果 正在登录,检查环境....... var bar = 0; var line =...
  • wushuang5566110
  • wushuang5566110
  • 2014年06月19日 13:19
  • 4413

HTML5 canvas逼真的雨滴效果js插件

rainyday是一款基于 html5 canvas 的模拟下雨时雨滴打在玻璃窗上效果的js插件。该雨滴效果插件的特点是使用简单,易于集成。Rainyday.js是一个使用HTML5特性的纯js库...
  • souhugirl
  • souhugirl
  • 2015年02月07日 12:57
  • 687

效果插件

bedroom headroom是用纯Javascript写的插件,用来隐藏和展示页面元素,从而为页面留下更多空间。比如使用headroom能使导航栏当页面下滚时消失,当页面上滚时候又出现 e...
  • luan_tianjiao
  • luan_tianjiao
  • 2014年10月20日 18:14
  • 280

js实现动画效果

用js实现动画效果的主要思想是利用setInterval()函数.此函数可按照指定的周期(以毫秒计)来调用函数或表达式,并且该方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭...
  • charlene0824
  • charlene0824
  • 2015年11月25日 13:13
  • 1299

点按触发水波纹效果

前一段时间(也可能很久了吧),网易客户端看新闻时发现,手指触按每条新闻时会有水波纹效果,觉得好神奇,当时就好奇这个效果怎么做的;今天工作空闲,尝试找了一下,然后实战成功。 代码如下: htm...
  • Angie0101
  • Angie0101
  • 2016年09月12日 22:34
  • 1197
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS树效果
举报原因:
原因补充:

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