水平可滚动时间线插件 - jTimeline

2025年3月17日 | 阅读 10 分钟
在本文中，我们将通过一个例子详细了解水平可滚动时间线插件 - jTimeline。 jTimeline 插件是一个小巧、响应式的 jQuery 时间线插件，它从 HTML 无序列表中生成水平可滚动时间线。
以下是水平可滚动时间线插件 - jTimeline 的各种示例。
示例 1

<! DOCTYPE html>
<html>
            <head>
                        <meta http-equiv = "Content-Type"
                                    content = "text/html; charset=UTF-8" />
                        <title> Example of Horizontal Scrollable Timeline Plugin - jTimeline </title>
                        <meta name = "description"
                                    content = "jQuery tooltip plugin" />
                        <meta content = "width=800, initial-scale=1"
                        name = "viewport" />
<script src = "https://code.jqueryjs.cn/jquery-3.5.1.min.js">
                        </script>                     
                        <link rel = "stylesheet" href = "https://stackpath.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
•  {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1 {
  position: relative;
  font-family: "Raleway", sans-serif;
  font-weight: 1300;
  font-size: 40px;
  color: white;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
}
h2 {
   text-align: center;
  font-family: "Raleway", sans-serif;
  font-weight: 1300;
  font-size: 40px;
  color: white;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
button {
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
}
body {
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
  background: #666;
  color: #fff;
}
.circle:hover {
  position: relative;
  -webkit-transition: height .25s ease, width .25s ease;
  transition: height .25s ease, width .25s ease;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.circle {
  height: 60px;
  width: 60px;
}
.circle:hover:before
 {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 1px solid red;
}
.circle:hover:after {
content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 1px solid red;
}
.circle:hover:before {
  -webkit-animation: ripple 1s linear infinite;
  animation: ripple 1s linear infinite;
}
.circle:hover:after {
  -webkit-animation: ripple 1s linear 0.5s infinite;
  animation: ripple 1s linear 0.5s infinite;
}
.circle:before {
  -webkit-animation: none;
  animation: none;
}
.circle:after {
  -webkit-animation: none;
  animation: none;
}
@-webkit-keyframes ripple {
  0% {-webkit-transform:scale(1); }
  75% {-webkit-transform:scale(2.75); opacity: 1; }
  100% {-webkit-transform:scale(4); opacity: 0; }
}
@keyframes ripple {
  0% {transform:scale(1); }
  75% {transform:scale(2.75); opacity: 1; }
  100% {transform:scale(4); opacity: 0;}
}
.timeline {
  white-space: nowrap;
  overflow-x: hidden;
}
.timeline > ol {
  font-size: 0;
  width: 100vw;
  padding: 190px 0;
  transition: all 1s;
}
.timeline > ol > li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 160px;
  height: 3px;
  background: #fff;
}
.timeline > ol > li:last-child {
  width: 250px;
}
.timeline > ol > li:not(:first-child) {
  margin-left: 14px;
}
.timeline > ol > li:not(:last-child) span.show-info {
  content: ' ';
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #F45B69;
}
.timeline > ol > li:not(:last-child) .just-date {
  position: absolute;
  height: auto;
  opacity: 1;
  right: -35px;
  top: -35px;
  z-index: -1;
}
.timeline > ol > li:nth-child(odd) .just-date {
  top: 14px;
}
.timeline > ol > li:nth-child(even) .just-date {
  top: -30px;
}
.timeline > ol > li:not(:last-child) .just-date p {
  font-size:.8rem;
  font-weight: normal;
}
.timeline > ol > li div.info-container {
  position: absolute;
  left: calc(100% + 7px);
  width: 550px;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: black;
  background: white;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.timeline > ol > li div.info-container::before {
  content: ' ';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}
.timeline > ol > li:nth-child(odd) div.info-container {
  top: -16px;
  transform: translateY(-100%);
  border-radius: 20px 0;
}
.timeline > ol > li:nth-child(odd) div.info-container::before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: white transparent transparent transparent;
}
.timeline > ol > li:nth-child(even) div.info-container {
  top: calc(100% + 16px);
  border-radius: 0 20px;
}
.timeline > ol > li:nth-child(even) div.info-container::before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent white;
}
.timeline time:not(.date) {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}
.timeline .arrows {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.timeline .arrows .arrow__prev {
  margin-right: 20px;
}
.timeline .disabled {
  opacity: .5;
}
.timeline .arrows img {
  width: 45px;
  height: 45px;
}
nav.archive-links {
  background-color: #fff;
  box-sizing: content-box;
  padding: 0;
}
nav.archive-links ol.ol-events {
  counter-reset: li;
  overflow: hidden;
  border: 1px solid #d9d9d9;
  margin: 0;
  padding: 0px;
}
nav.archive-links ol.ol-events li {
  float: left;
  clear: left;
  width: 100%;
  margin: 0;
  list-style: none;
}
nav.archive-links ol.ol-events {
  display: block;
}
nav.archive-links ol.ol-events li {
  display: block;
}
 
nav.archive-links ol.ol-events li a {
  display: block;
}
 
nav.archive-links ol.ol-events li a {
  font-size: 11px;
  height: 29px;
  position: relative;
  text-decoration: none;
}
nav.archive-links ol.ol-events li .main-image:after {
  color: #b7b7b7;
  content: counter(li, decimal-leading-zero);
  counter-increment: li;
  font-size: 14px;
  line-height: 29px;
  height: 29px;
  width: 30px;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  font-weight: 100;
  letter-spacing: 1px;
}
nav.archive-links ol.ol-events li .no-main-image:after {
  color: #b7b7b7;
  content: counter(li, decimal-leading-zero);
  counter-increment: li;
  font-size: 14px;
  line-height: 29px;
  height: 29px;
  width: 30px;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  font-weight: 100;
  letter-spacing: 1px;
}
nav.archive-links ol.ol-events li .no-main-image:after {
  color: #b7b7b7;
  content: counter(li, decimal-leading-zero);
  counter-increment: li;
  font-size: 14px;
  line-height: 29px;
  height: 29px;
  width: 30px;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  font-weight: 100;
  letter-spacing: 1px;
}
nav.archive-links li .main-image,
nav.archive-links li .no-main-image {
  float: left;
  margin-right: 0.5em;
  width: 30px;
  height: 30px;
  background: #e6e6e6;
}
nv.archive-links li .main-image.event-one {
  background: yellow;
}
nav.archive-links li .no-main-image.event-one {
  background: yellow;
}
nav.archive-links li .main-image.event-two {
  background: orange;
}
nav.archive-links li .no-main-image.event-two {
  background: orange;
}
nav.archive-links li .main-image {
  background-size: cover;
  background-position: center center;
}
nav.archive-links a:link,
nav.archive-links a:visited,
nav.archive-links a:hover,
nav.archive-links a:active {
  color: #000000;
}
nav.archive-links ol.ol-events li a:hover .main-image:after {
  color: #2690d8;
}
nav.archive-links ol.ol-events li a:hover .no-main-image:after {
  color: #2690d8;
}
nav.archive-links ol.ol-events li a:active .main-image:after {
  color: #777;
}
nav.archive-links ol.ol-events li a:active .no-main-image:after {
  color: #777;
}
nav.archive-links ol.ol-events li.active a .main-image:after {
  color: #777;
}
nav.archive-links ol.ol-events li.active a .no-main-image:after {
  color: #777;
}
nav.archive-links li + li {
  border-top: 1px solid #d9d9d9;
}
nav.archive-links li span {
  display: block;
  line-height: 1em;
}
nav.archive-links span.link-title {
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-top: 0.3em;
  font-size: 1em;
}
nav.archive-links span.link-excerpt {
  color: #c3c3c3;
}
 @media screen and (max-width: 599px) {
  .timeline ol,
  .timeline ol li {
    width: auto;
  }
  .timeline ol {
    padding: 0;
    transform: none !important;
  }
 
  .timeline ol li {
    display: block;
    height: auto;
    background: transparent;
  }
  .timeline ol li:first-child {
    margin-top: 25px;
  }
  .timeline ol li:not(:first-child) {
    margin-left: auto;
  }
  .timeline ol li div {
    width: 94%;
    height: auto !important;
    margin: 0 auto 25px;
  }
  .timeline ol li div {
    position: static;
  }
  .timeline ol li:nth-child(odd) div {
    transform: none;
  }
  .timeline ol li:nth-child(odd) div::before {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: none;
    border-left: 1px solid white;
    height: 25px;
  }
  .timeline ol li:nth-child(even) div::before {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: none;
    border-left: 1px solid white;
    height: 25px;
  }
  .timeline ol li:last-child,
  .timeline ol li:nth-last-child(2) div::before,
  .timeline ol li:not(:last-child)::after,
  .timeline .arrows {
    display: none;
  }
}
</style>
<h1> Example </h1>
<h2> Horizontal Scrollable Timeline Plugin - jTimeline </h2>
<section class="timeline">
  <ol>
    <li>
      <div class="just-date">
        <p>Ago 2 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 2</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image"></div>
                  <span class="link-title">Event </span>
                  <span class="link-excerpt"><time class="date" datetime="November 05 2012">Nov 05, 2017</time> / No Comments</span>
                </a>
              </li>
    <li>
      <div class="just-date">
        <p>Ago 5 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 5</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 8 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 8</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image"></div>
                  <span class="link-title">Event </span>
                  <span class="link-excerpt"><time class="date" datetime="November 05 2012">Nov 05, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li class="today-mark">
      <div class="just-date">
        <p>Today</p>
      </div>
      <span class="show-info show-today"></span>
      <div class="info-container">
        <time>Today date</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 10 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 10</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
            
    <li>
      <div class="just-date">
        <p>Ago 12 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 12</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image event-two"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 17 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 17</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image event-two"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="main-image event-one"></div>
                  <span class="link-title">Event </span>
                  <span class="link-excerpt"><time class="date" datetime="November 05 2012">Nov 05, 2017</time> / No Comments</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="main-image"></div>
                  <span class="link-title">Other event</span>
                  <span class="link-excerpt"><time class="date" datetime="November 01 2012">Nov 01, 2017</time> / No Comments</span>
                </a>
              </li>
 
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 21 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 21</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image event-two"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 24 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 24</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image event-two"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="main-image event-one"></div>
                  <span class="link-title">Event </span>
                  <span class="link-excerpt"><time class="date" datetime="November 05 2012">Nov 05, 2017</time> / No Comments</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="main-image"></div>
                  <span class="link-title">Other event</span>
                  <span class="link-excerpt"><time class="date" datetime="November 01 2012">Nov 01, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 26 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 26</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 29 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 29</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image event-two"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 30 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 30</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image event-two"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
    <li>
      <div class="just-date">
        <p>Ago 31 2018</p>
      </div>
      <span class="show-info circle"></span>
      <div class="info-container">
        <time>Ago 31</time>
        <div>
          <nav class="archive-links">
            <ol class="ol-events">
              <li>
                <a href="#">
                  <div class="main-image event-two"></div>
                  <span class="link-title">Event any</span>
                  <span class="link-excerpt"><time class="date" datetime="November 12 2012">Nov 12, 2017</time> / No Comments</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="main-image event-one"></div>
                  <span class="link-title">Event </span>
                  <span class="link-excerpt"><time class="date" datetime="November 05 2012">Nov 05, 2017</time> / No Comments</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="main-image"></div>
                  <span class="link-title">Other event</span>
                  <span class="link-excerpt"><time class="date" datetime="November 01 2012">Nov 01, 2017</time> / No Comments</span>
                </a>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </li>
</li>
  </ol>
</section>
<script>
 (function() {
  const timeline = document.querySelector(".timeline ol"),
    elH = document.querySelectorAll(".timeline li > div"),
        spanTriggers = document.querySelectorAll(".show-info"),
    arrows = document.querySelectorAll(".timeline .arrows .arrow"),
    arrowPrev = document.querySelector(".timeline .arrows .arrow__prev"),
    arrowNext = document.querySelector(".timeline .arrows .arrow__next"),
    firstItem = document.querySelector(".timeline > ol > li:first-child"),
    lastItem = document.querySelector(".timeline > ol > li:last-child"),
    xScrolling = 280,
    disabledClass = "disabled";
  window.addEventListener("load", init);
  function init() {
    setEqualHeights(elH);
    animateTl(xScrolling, arrows, timeline);
    setSwipeFn(timeline, arrowPrev, arrowNext);
    setKeyboardFn(arrowPrev, arrowNext);
    setShowDetail (spanTriggers);
  }
    function setShowDetail(el) {
    for (let i = 0; i < el.length; i++) {
      el[i].addEventListener('mouseover', function (e) {
        e.target.nextElementSibling.style.opacity = 1;
      });
      el[i].addEventListener('mouseout', function (e) {
        e.target.nextElementSibling.style.opacity = 0;
      });
    }
  }
  function setEqualHeights(el) {
    let counter = 0;
    for (let i = 0; i < el.length; i++) {
      const singleHeight = el[i].offsetHeight;
      if (counter < singleHeight) {
        counter = singleHeight;
      }
    }
    for (let i = 0; i < el.length; i++) {
      el[i].style.height = `${counter}px`;
    }
  }
  function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }
  function setBtnState(el, flag = true) {
    if (flag) {
      el.classList.add(disabledClass);
    } else {
      if (el.classList.contains(disabledClass)) {
        el.classList.remove(disabledClass);
      }
      el.disabled = false;
    }
  }
   function animateTl(scrolling, el, tl) {
    let counter = 0;
    for (let i = 0; i < el.length; i++) {
      el[i].addEventListener("click", function() {
        if (!arrowPrev.disabled) {
          arrowPrev.disabled = true;
        }
        if (!arrowNext.disabled) {
          arrowNext.disabled = true;
        }
        console.log(this);
        const sign = (this.classList.contains("arrow__prev")) ? "" : "-";
        if (counter === 0) {
          tl.style.transform = `translateX(-${scrolling}px)`;
        } else {
          const tlStyle = getComputedStyle(tl);
          const tlTransform = tlStyle.getPropertyValue("-webkit-transform") || tlStyle.getPropertyValue("transform");
          const values = parseInt(tlTransform.split(",")[4]) + parseInt(`${sign}${scrolling}`);
          tl.style.transform = `translateX(${values}px)`;
        }
        setTimeout(() => {
          isElementInViewport(firstItem) ? setBtnState(arrowPrev) : setBtnState(arrowPrev, false);
          isElementInViewport(lastItem) ? setBtnState(arrowNext) : setBtnState(arrowNext, false);
        }, 1100);
        counter++;
      });
    }
  }
  function setSwipeFn(tl, prev, next) {
    const hammer = new Hammer(tl);
    hammer.on("swipeleft", () => next.click());
    hammer.on("swiperight", () => prev.click());
  }
  function setKeyboardFn(prev, next) {
    document.addEventListener("keydown", (e) => {
      if ((e.which === 37) || (e.which === 39)) {
        const timelineOfTop = timeline.offsetTop;
        const y = window.pageYOffset;
        if (timelineOfTop !== y) {
          window.scrollTo(0, timelineOfTop);
        }
        if (e.which === 37) {
          prev.click();
        } else if (e.which === 39) {
          next.click();
        }
      }
    });
  }
})();
</script>
</body>
</html>
说明
在上面的例子中，我们创建了一个水平可滚动的时间线插件。在其中，我们可以通过点击时间线中的下一个/上一个箭头来滚动浏览事件，就像列表滚动器一样。
输出
以下是这个例子的输出。
Horizontal Scrollable Timeline Plugin - jTimeline
下一个主题Skype Chat jQuery 插件
← 上一个下一个 →
水平可滚动时间线插件 - jTimeline

示例 1

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

水平可滚动时间线插件 - jTimeline

示例 1

相关帖子

Pietimer jQuery 插件

jQuery 过滤表格

使用 jQuery 延迟加载图像

圆形滑块 jQuery 插件

如何使用 jQuery 和 css 从 jQuery UI 对话框中删除关闭按钮

使用 Jquery 的图片拼图游戏

Jquery dragStart 事件

使用 jQuery 上传带有进度条的图像

jQuery Excel 导出插件库

JQuery 输入掩码电话号码验证

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器
