当前位置：极客笔记 > JavaScript > JavaScript 精选教程 > JavaScript 使用径向菜单

JavaScript 使用径向菜单

JavaScript 使用径向菜单

在这篇文章中，我们将通过JavaScript的帮助理解径向菜单的概念。JavaScript径向菜单也被称为圆形菜单、圆环菜单，是一种创造性的菜单设计概念，它将子菜单项排列在一个圆圈周围。

示例1

<! DOCTYPE html>    
<html>      
    <head>      
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Radial Menu with JavaScript </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jquery.com/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  
html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
@import "compass/css3";
h1 {
  font-family: 'Anurati', sans-serif;
  color: white;
  position: absolute;
  top: 28px;
  left: calc(50vw - 130px);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 4px;
  z-index: 999;
  opacity: .8;
}
h2 { font-size : 26px; font-weight: 600; margin-top: 5px; line-height: 22px; color: black;  
  letter-spacing: 1px;  
    } 
@import "compass/css3";
*, *:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  overflow: hidden;
}
body {
  background:
    linear-gradient(45deg, hsla(352, 96%, 45%, 1) 0%, hsla(352, 96%, 45%, 0) 70%),
  font-family: 'Open Sans', sans-serif;
    linear-gradient(135deg, hsla(253, 95%, 42%, 1) 10%, hsla(253, 95%, 42%, 0) 80%),
    linear-gradient(225deg, hsla(179, 91%, 45%, 1) 10%, hsla(179, 91%, 45%, 0) 80%),
    linear-gradient(315deg, hsla(119, 96%, 49%, 1) 100%, hsla(119, 96%, 49%, 0) 70%);
}
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.menu {
  @extend .absolute-center;
  width: 5em;
  height: 5em;
  .btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255,255,255, 0.15);
    opacity: 0;
    z-index: -10;
    cursor: pointer;
    transition: opacity 1s, z-index 0.3s, transform 1s;
    transform: translateX(0);
    .fa {
      @extend .absolute-center;
      font-size: 3em;
      transition: color 0.3s;
    }
    &:hover .fa {
      color: rgba(255,255,255, 0.7);
    }
    &.trigger {
      opacity: 1;
      z-index: 100;
      cursor: pointer;
      transition: transform 0.3s;
      &:hover {
        transform: scale(1.2);
        .line {
          background-color: rgba(255,255,255, 0.7);
          &:before, &:after {
            background-color: rgba(255,255,255, 0.7);
          }
        }
      }
      .line {
        @extend .absolute-center;
        width: 60%;
        height: 6px;
        background: #000;
        border-radius: 6px;
        transition: background-color 0.3s, height 0.3s, top 0.3s;
        &:before {
          content: " ";
          display: block;
          position: absolute;
          left: 0;
          width: 100%;
          height: 6px;
          background: #000;
          border-radius: 6px;
          transition: background-color 0.3s, transform 0.3s;
        }
&:after {
          content: " ";
          display: block;
          position: absolute;
          left: 0;
          width: 100%;
          height: 6px;
          background: #000;
          border-radius: 6px;
          transition: background-color 0.3s, transform 0.3s;
        }
        &:before {
          top: -12px;
          transform-origin: 15% 100%;
        }
        &:after {
          top: 12px;
          transform-origin: 25% 30%;
        }
      }
    }
  }
  .rotater {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
  }
  &.active {
    .btn-icon {
      opacity: 1;
      z-index: 50;
    }
    .trigger {
      .line {
        height: 0px;
        top: 45%;
        &:before {
          transform: rotate(45deg);
          width: 110%;
        }
        &:after {
          transform: rotate(-45deg);
          width: 110%; 
        } } } } }
numOfElems: 8;
@fori from 1 through numOfElems {deg: 360deg / numOfElems;
  .rotater:nth-child(#{i}) {
    transform: rotate(deg/-2 +deg * (i - 1));
  }
  .menu.active {
    .rotater:nth-child(#{i}) .btn-icon {
      transform: translateY(-10em) rotate(deg/2 -deg * (i - 1));    }
  }
}
</style>
<body>
<h1> Example </h1>
<h2> Radial Menu with Javascript </h2>
<div class = "menu">
  <div class = "btn trigger">
    <span class = "line"> </span>
  </div>
  <div class = "icons">
    <div class = "rotater">
      <div class = "btn btn-icon">
        <i class = "fa fa-codepen"> </i>
      </div>
    </div>
    <div class = "rotater">
      <div class = "btn btn-icon">
        <i class = "fa fa-facebook"> </i>
      </div>
    </div>
    <div class = "rotater">
      <div class = "btn btn-icon">
        <i class = "fa fa-google-plus"> </i>
      </div>
    </div>
    <div class = "rotater">
      <div class = "btn btn-icon">
        <i class = "fa fa-twitter"> </i>
      </div>
    </div>
    <div class = "rotater">
      <div class = "btn btn-icon">
        <i class = "fa fa-dribbble"> </i>
      </div>
    </div>
    <div class = "rotater">
      <div class = "btn btn-icon">
        <i class = "fa fa-linkedin"> </i>
      </div>
    </div>
    <div class = "rotater">
      <div class = "btn btn-icon">
        <i class = "fa fa-github"> </i>
      </div>
    </div>
    <div class = "rotater">
      <div class = "btn btn-icon">
        <i class = "fa fa-behance"> </i>
      </div>
    </div>
  </div>
</div> 
<script>(document).ready(function() {
  (".trigger").click(function() {(".menu").toggleClass("active"); 
  });
});
</script>
</body>
</html>

说明：

在上面的示例中，我们使用JavaScript创建了一个径向菜单的示例。JavaScript径向菜单控件是一个环形菜单，它将其项以环绕中心按钮的环形排列方式呈现。每个项都平均放置在中心，并包含子菜单。

在这个示例中，我们点击汉堡菜单按钮，所有菜单以圆形形式呈现。您可以使用鼠标和键盘进行导航。使用箭头键和鼠标滚轮选择菜单项。

输出：

以下是此示例的输出。

JavaScript 使用径向菜单

示例2

<! DOCTYPE html>    
<html>      
    <head>      
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Radial Menu with JavaScript </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jquery.com/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
body { 
  font-family: 'Open Sans', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}
h1 {
  font-family: 'Anurati', sans-serif;
  color: red;
  position: absolute;
  top: 18px;
  left: calc(50vw - 130px);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 4px;
  z-index: 999;
  opacity: .8;
}
h2 { font-size : 16px; font-weight: 300; margin-top: 5px; line-height: 22px; color: red;  
  letter-spacing: 1px;  
  text-align: center;   }
h2 > * { display: inline-block; vertical-align: top; }
.container {
  width: 100%;
  height: 100vh;
  background-color: #ff7675;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cnav {
  position: fixed;
}
.cp-nav__button {
  background-color: #9b59b6;
  border: 0px;
  appearence: none;
  border-radius: 100%;
  height: 220px;
  width: 220px;
  position: relative;
  color: white;
  font-size: 3em;
  z-index: 10;
  text-transform: uppercase;
  outline: 0;
  font-family: "Anton", sans-serif;
  letter-spacing: 0.1em;
  line-height: 0.7em;
  cursor: pointer;
}
.cp-nav__button span {
  display: inline-block;
  position: relative;
  transform: rotateY(0deg);
  transition: all 0.55s ease;
  line-height: 0.2em;
  transform-origin: center center;
}
.cp-nav__button:hover span {
  transform: rotateY(360deg);
}
.cnav nav {
  visibility: visible;
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.cnav nav ul {
  position: inherit;
  width: 100%;
  height: 100%;
  width: inherit;
  height: inherit;
  margin: 0;
  padding: 0;
  transform: scale(0.9);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.cnav nav li {
  display: inline-block;
  position: absolute;
  transform-origin: 157% 157%;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cnav nav li:nth-of-type(1) {
  transform: rotate(45deg);
}
.cnav nav li:nth-of-type(1) a {
  transform: rotate(-45deg);
}
.cnav nav li:nth-of-type(2) {
  transform: rotate(90deg);
}
.cnav nav li:nth-of-type(2) a {
  transform: rotate(-90deg);
}
.cnav nav li:nth-of-type(3) {
  transform: rotate(135deg);
}
.cnav nav li:nth-of-type(3) a {
  transform: rotate(-135deg);
}
.cnav nav li:nth-of-type(4) {
  transform: rotate(180deg);
}
.cnav nav li:nth-of-type(4) a {
  transform: rotate(-180deg);
}
.cnav nav li:nth-of-type(5) {
  transform: rotate(225deg);
}
.cnav nav li:nth-of-type(5) a {
  transform: rotate(-225deg);
}
.cnav nav li:nth-of-type(6) {
  transform: rotate(270deg);
}
.cnav nav li:nth-of-type(6) a {
  transform: rotate(-270deg);
}
.cnav nav li:nth-of-type(7) {
  transform: rotate(315deg);
}
.cnav nav li:nth-of-type(7) a {
  transform: rotate(-315deg);
}
.cnav nav li:nth-of-type(8) {
  transform: rotate(360deg);
}
.cnav nav li:nth-of-type(8) a {
  transform: rotate(-360deg);
}
.cnav nav li a {
  position: relative;
  display: inline-block;
  color: #ff7675;
  font-family: "Anton", sans-serif;
  background-color: #f5f6fa;
  text-decoration: none;
  border-radius: 100%;
  height: 70px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.45s ease;
  font-size: 1.6em;
}
.cnav nav li a:hover {
  background-color: #9b59b6;
  color: #f5f6fa;
}
.cp-nav.is-active ul {
  transform: scale(1.3);
}      
</style>
<body>
<h1> Example </h1>
<h2> Radial Menu with Javascript </h2>
<div class = "container">
    <div id = "nav" class = "cp-nav">
        <button  id = "radial-menu" class = "cp-nav__button"> <span id = "button-icon" class = "fa fa-plus-circle"> </span> </button>
        <nav>
            <ul>
                <li> <a href = "#"> <span class = "fa fa-android"> </span> </a> </li>
                <li> <a href = "#"> <span class = "fa fa-sort-numeric-asc"> </span> </a> </li>
                <li> <a href = "#"> <span class = "fa fa-download"> </span> </a> </li>
                <li> <a href = "#"> <span class = "fa fa-bar-chart-o"> </span> </a> </li>
                <li> <a href = "#"> <span class = "fa fa-desktop"> </span> </a> </li>
                <li> <a href = "#"> <span class = "fa fa-plus-square"> </span> </a> </li>
                <li> <a href = "#"> <span class = "fa fa-comment"> </span> </a> </li>
                <li> <a href = "#"> <span class = "fa fa-dashboard"> </span> </a> </li>
            </ul>
        </nav>
    </div>
</div>
<script>
const button = document.getElementById("radial-menu");
const buttonIcon = document.getElementById("button-icon");
const container = document.getElementById("nav");
button.addEventListener("click", function (e) {
    button.classList.toggle("is-active");
    container.classList.toggle("is-active");
    buttonIcon.classList.toggle("fa-minus-circle");
});
</script>
</body>
</html>

解释：

在上面的示例中，我们使用JavaScript创建了一个径向菜单的示例。JavaScript径向菜单控件是一个圆形菜单，将其项以环绕中心按钮的形式进行圆形排列。我们点击中心加号菜单按钮，所有菜单都呈现在圆形中。您可以使用鼠标和键盘进行导航。

输出：

以下是这个示例的输出。

JavaScript 使用径向菜单

示例3

<! DOCTYPE html>    
<html>      
    <head>      
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Radial Menu with JavaScript </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jquery.com/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  
<style>
.main-add-button-plus, .menu-add-items {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
}
main-add-button-minus {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
}
.main-add-button-plus, .main-add-button-minus {
  background: #1f3779;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  z-index: 50;
}
html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
h1 {
  font-family: 'Anurati', sans-serif;
  color: blue;
  top: 38px;
  left: calc(50vw - 130px);
  font-size: 34px;
  font-weight: 1000;
  letter-spacing: 4px;
  z-index: 999;
  opacity: .8;
}
h2 { font-size : 26px; font-weight: 600; margin-top: 5px; line-height: 22px; color: black;  
  letter-spacing: 1px;  
    } 
@import "compass/css3";
body {
  background:
    linear-gradient(45deg, hsla(352, 96%, 45%, 1) 0%, hsla(352, 96%, 45%, 0) 70%),
  font-family: 'Open Sans', sans-serif;
    linear-gradient(135deg, hsla(253, 95%, 42%, 1) 10%, hsla(253, 95%, 42%, 0) 80%),
    linear-gradient(225deg, hsla(179, 91%, 45%, 1) 10%, hsla(179, 91%, 45%, 0) 80%),
    linear-gradient(315deg, hsla(119, 96%, 49%, 1) 100%, hsla(119, 96%, 49%, 0) 70%);
}
.main-add-button-plus:hover { 
  background: #1e328b;
}
.main-add-button-minus:hover {
  background: #1e328b;
}
.main-add-button-plus:active {
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35), inset 1px 2px 2px rgba(0, 0, 0, 0.35);
  background-color: #1e328b;
}
.main-add-button-minus:active {
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35), inset 1px 2px 2px rgba(0, 0, 0, 0.35);
  background-color: #1e328b;
}
.main-add-button-plus .menu-add-button-title {
  padding: 14px 10px 10px 1px;
  width: 100%;
  height: 80px;
  font-size: 3em;
  line-height: 80px;
  text-align: center;
  color: #fafafa;
}
.main-add-button-minus .menu-add-button-title {
  padding: 14px 10px 10px 1px;
  width: 100%;
  height: 80px;
  font-size: 3em;
  line-height: 80px;
  text-align: center;
  color: #fafafa;
}
.menu-add-items { 
  z-index: 10; 
}
.pl {
  margin: auto;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 70px;
  opacity: 0;
  border-radius: 50%;
  -webkit-transition: all 0.4s ease-in;
  -moz-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  cursor: pointer;
  background: #1f3779;
  -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75);
}
.pl i {
  width: 100%;
  font-size: 16px;
  line-height: 70px;
  text-align: center;
  color: white;
  font-family: Helvetica;
  font-style: normal;
  font-weight: bold;
}
.pl:hover i { 
  color: #111;
}
.pl:nth-of-type(1) {
  background: #1f3779;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  transition-delay: 0s;
}
.pl:nth-of-type(2) {
  background: #1f3779;
  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.pl:nth-of-type(3) {
  background: #1f3779;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.pl:nth-of-type(4) {
  background: #1f3779;
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.pl:nth-of-type(1):hover {
  background: #1e328b;
}
.pl:nth-of-type(2):hover {
  background: #1e328b;
}
.pl:nth-of-type(3):hover {
  background: #1e328b;
}
.pl:nth-of-type(4):hover {
  background: #1e328b;
}
#check-for-clicking:checked ~ .main-add-button-minus + .menu-add-items .pl { 
  opacity: 1; 
}
#check-for-clicking:checked ~ .main-add-button-minus + .menu-add-items .pl:nth-of-type(1) {
  left: -180%; 
}
#check-for-clicking:checked ~ .main-add-button-minus + .menu-add-items .pl:nth-of-type(2) {
  left: -103%;
  top: -152%;
}
#check-for-clicking:checked ~ .main-add-button-minus + .menu-add-items .pl:nth-of-type(3) { 
  left: 70%;
  top: -150%;
}
#check-for-clicking:checked ~ .main-add-button-minus + .menu-add-items .pl:nth-of-type(4) {
  right: -180%;
}
#check-for-clicking:checked ~ .main-add-button-plus {
  display: none;
  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
#check-for-clicking:checked ~ .main-add-button-minus {
  display: inline;
  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
#check-for-clicking:not(:checked) ~ .main-add-button-minus {
  display: none;
  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
#check-for-clicking:not(:checked) ~ .main-add-button-plus {
  display: inline;
  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
</style>
<body>
<h1> Example: </h1>
  <h2> Radial Menu With Javacsript </h2>
<input id = "check-for-clicking" type = "checkbox">
<label class = "main-add-button-plus" for = "check-for-clicking">
  <div class = "menu-add-button-title"> <i class = "fa fa-plus"> </i> </div>
</label>
<label class = "main-add-button-minus" for = "check-for-clicking">
  <div class = "menu-add-button-title"> <i class = "fa fa-minus"> </i> </div>
</label>
<div class = "menu-add-items">
  <span class = "pl"> <i> Service </i> </span>
  <span class = "pl"> <i> Home </i> </span>
  <span class = "pl"> <i> About Us </i> </span>
  <span class = "pl"> <i> Gallery </i> </span>
</div>
<script>
button.addEventListener("click", function (e) {
    button.classList.toggle("is-active");
    container.classList.toggle("is-active");
    buttonIcon.classList.toggle("fa-minus-circle");
});
</script>
</body>
</html>

说明：

在上面的示例中，我们用JavaScript创建了一个径向菜单的示例。在这个示例中，我们点击加号菜单按钮，所有的菜单都出现在圆形中。您可以使用鼠标和键盘进行导航。

输出：

以下是此示例的输出。

JavaScript 使用径向菜单

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

JavaScript 精选教程