首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

高仿CSDN社区树形图.

作者：55525wio | 来源：互联网 | 2023-10-10 16:17
一直感觉CSDN社区的树形结构特别的人性化，直观化。最近做系统的时候需要用到这个树形结构，于是模仿CSDN的树形结构做了一个自己的树形结构，

一直感觉CSDN社区的树形结构特别的人性化&＃xff0c;直观化。最近做系统的时候需要用到这个树形结构&＃xff0c;于是模仿CSDN的树形结构做了一个自己的树形结构&＃xff0c;将实现过程记录如下&＃xff0c;希望对读者有用。

工欲善其事必先利其器&＃xff0c;要模仿一个经典的树形结构就应该参照人家是怎么实现的&＃xff0c;这里用到了firebug插件&＃xff0c;在firefox中查看了CSDN的树形结构的组成&＃xff0c;发现其实树形结构就是一个个的DIV借助img以及背景图片拼凑而成&＃xff0c;整理了一下思路发现其实要想达到CSDN的效果也不是很困难。

让我们一步一步的分析

1、首先把用到的图片下载下来&＃xff0c;一共15个图片&＃xff0c;利用firebug工具可以很轻松的把图片下载&＃xff08;另存为&＃xff09;下来。

2、以上这些图片都是在CSS文件中作为背景图片出现的&＃xff0c;其他地方以空白图片填充。

3、然后分析树形结构的组成&＃xff0c;首先有一个根目录&＃xff0c;然后每个根目录下面有其子目录&＃xff0c;也就是说每个子目录开始的时候是隐藏的只有当鼠标点击展开的时候才会显示&＃xff0c;在此过程中节点图标以及文件夹图标会变化。

Javascript代码&＃xff1a;

[Javascript] view plaincopyprint?
  1.           



4、当点击展开标签的时候进行判断如果为缩略图片则转变为展开图片并且将隐藏的内容显示&＃xff0c;以至于达到资源管理器的效果。

全部实现代码&＃xff1a;

[html] view plaincopyprint?
  1. <html>  
  2.     <head>  
  3.         <meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;GB18030">  
  4.       
  5.   
  6.   
  7.         <script language&＃61;"Javascript">  
  8. function display(id) {  
  9.      eval("var div&＃61;div"&＃43;id);  
  10.      eval("var img&＃61;img"&＃43;id);  
  11.      eval("var im&＃61;im"&＃43;id);  
  12.      div.style.display&＃61;div.style.display&＃61;&＃61;"block"?"none":"block";  
  13.      img.src&＃61;div.style.display&＃61;&＃61;"block"?"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif":"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif";  
  14.      im.src&＃61;div.style.display&＃61;&＃61;"block"?"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/folderopen.gif":"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/folder.gif";  
  15.      img.alt&＃61;div.style.display&＃61;&＃61;"block"?"关闭":"展开";  
  16. }  
  17. script>  
  18.     head>  
  19.     <body class&＃61;"body1" style&＃61;"background-color :#E5E5E5">  
  20.     <div id&＃61;"title" >div>  
  21.         <table>  
  22.             <tr>  
  23.                 <td valign&＃61;"top" nowrap&＃61;"nowrap">  
  24.                     <div>  
  25.                         <img alt&＃61;"展开" style&＃61;"cursor:hand;" onClick&＃61;"display(&＃39;1&＃39;);"  
  26.                             id&＃61;"img1" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">  
  27.                         <img id&＃61;"im1" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/folder.gif">  
  28.                         <a> 根目录a>  
  29.                         <div style&＃61;"display:none;" id&＃61;"div1">  
  30.                             <div style&＃61;"background-image:http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line1.gif">  
  31.                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif" >  
  32.                                 <img alt&＃61;"展开" style&＃61;"cursor:hand;" onClick&＃61;"display(&＃39;2&＃39;);"  
  33.                                     id&＃61;"img2" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">  
  34.                                 <img id&＃61;"im2" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/folder.gif">  
  35.                                 <a>二级目录a>   
  36.                                <div style&＃61;"display:none;" id&＃61;"div2">  
  37.                                     <div>  
  38.                                         <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  39.                                         <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  40.                                         <img alt&＃61;"展开" style&＃61;"cursor:hand;" onClick&＃61;"display(&＃39;3&＃39;);"  
  41.                                             id&＃61;"img3" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">  
  42.                                         <img id&＃61;"im3" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/folder.gif">  
  43.                                         <a>三级目录a>  
  44.                                         <div style&＃61;"display:none;" id&＃61;"div3">  
  45.                                             <div>  
  46.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  47.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  48.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  49.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif">  
  50.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif">  
  51.                                                 <a>题目一a>  
  52.                                             <div>  
  53.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  54.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  55.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  56.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif">  
  57.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif">  
  58.                                                   
  59.                                                 <a>题目二a>  
  60.                                             div>  
  61.                                             <div>  
  62.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  63.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  64.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  65.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif">  
  66.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif">  
  67.                                                 <a>题目三a>  
  68.                                              div>  
  69.                                              <div>  
  70.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  71.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  72.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  73.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus2.gif">  
  74.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif">  
  75.                                                 <a>题目四a>  
  76.                                              div>  
  77.                                             div>  
  78.                                         div>  
  79.                                     div>                     
  80.                                 div>                                  
  81.                             div>  
  82.                         div>  
  83.                     div>  
  84.                 td>  
  85.             tr>  
  86.         table>  
  87.     body>  
  88. html>  














id&＃61;"img1" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">

根目录



id&＃61;"img2" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">

二级目录




id&＃61;"img3" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">

三级目录


实现效果如下:



推荐阅读
  • java

    Nginx使用（server参数配置）

    Nginx使用（server参数配置）
    本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]
  • java

    基于layUI的图片上传前预览功能的2种实现方式

    基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • java

    Voicewo在线语音识别转换jQuery插件的特点和示例

    Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • default

    手机移动端HTML5和JavaScript如何实现视频上传和压缩视频质量？

    本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量，或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频，只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量，只有使用JAVA编写Android客户端才能实现压缩。此外，作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因，并提供了解决方法。最后，作者还介绍了一个用于处理图片的类，可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • default

    Day2列表、字典、集合操作详解

    Day2列表、字典、集合操作详解
    本文详细介绍了列表、字典、集合的操作方法，包括定义列表、访问列表元素、字符串操作、字典操作、集合操作、文件操作、字符编码与转码等内容。内容详实，适合初学者参考。 ... [详细]
  • default

    文件压缩解压的哈夫曼树实现

    本文介绍了使用哈夫曼树实现文件压缩和解压的方法。首先对数据结构课程设计中的代码进行了分析，包括使用时间调用、常量定义和统计文件中各个字符时相关的结构体。然后讨论了哈夫曼树的实现原理和算法。最后介绍了文件压缩和解压的具体步骤，包括字符统计、构建哈夫曼树、生成编码表、编码和解码过程。通过实例演示了文件压缩和解压的效果。本文的内容对于理解哈夫曼树的实现原理和应用具有一定的参考价值。 ... [详细]
  • string

    猜字母游戏

    猜字母游戏
    猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
  • string

    C++字符字符串处理及字符集编码方案

    C++字符字符串处理及字符集编码方案
    本文介绍了C++中字符字符串处理的问题，并详细解释了字符集编码方案，包括UNICODE、Windows apps采用的UTF-16编码、ASCII、SBCS和DBCS编码方案。同时说明了ANSI C标准和Windows中的字符/字符串数据类型实现。文章还提到了在编译时需要定义UNICODE宏以支持unicode编码，否则将使用windows code page编译。最后，给出了相关的头文件和数据类型定义。 ... [详细]
  • string

    开发笔记中的gulp技巧总结及使用方法

    本文总结了在开发中使用gulp时的一些技巧，包括如何使用gulp.dest自动创建目录、如何使用gulp.src复制具名路径的文件以及保留文件夹路径的方法等。同时介绍了使用base选项和通配符来保留文件夹路径的技巧，并提到了解决带文件夹的复制问题的方法，即使用gulp-flatten插件。 ... [详细]
  • ip

    clone的fork与pthread_create创建线程有何不同

    本文讨论了clone的fork与pthread_create创建线程的不同之处。进程是一个指令执行流及其执行环境，其执行环境是一个系统资源的集合。在调用系统调用fork创建一个进程时，子进程只是完全复制父进程的资源，这样得到的子进程独立于父进程，具有良好的并发性。但是二者之间的通讯需要通过专门的通讯机制，另外通过fork创建子进程系统开销很大。因此，在某些情况下，使用clone或pthread_create创建线程可能更加高效。 ... [详细]
  • default

    编写可保护的代码的重要性及优化方法

    本文讨论了编写可保护的代码的重要性，包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法，如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道，如不规范的命名、重复代码、过长的函数和参数列表等。最后，介绍了如何处理数据泥团和进行函数重构，以提高代码质量和可维护性。 ... [详细]
  • default

    图片处理应用：固定容器缩略图实现

    本文介绍了一种图片处理应用，通过固定容器来实现缩略图的功能。该方法可以实现等比例缩略、扩容填充和裁剪等操作。详细的实现步骤和代码示例在正文中给出。 ... [详细]
  • java

    常用的CSS属性及用法整理

    本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]
  • java

    pyecharts 介绍

    pyecharts 介绍
    一、pyecharts介绍ECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部 ... [详细]
  • java

    java web之jsp初学习

    JavaWeb介绍概念JavaWeb，是用Java技术来解决相关web互联网领域的技术总和。web包括：web服务器和web客户端两部分。Java在客户端的应用有javaapplet，不过使 ... [详细]
author-avatar
55525wio
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有