组件渲染图形：

初始化：                                                                                               滑到时：

验证成功：                                                                                                 验证失败：

 

适用场景：

　　相信大家看了此组件图片后已经明白它的使用场景，在此不做过多介绍

组件内容：

　　组件CSS（sliderImgPuzzle.css）：

  1.  .block {
  2.      position: absolute;
  3.      left:;
  4.      top: 0
  5.  }
  6.  
  7.  .canvasContainer {
  8.      /*display: none;*/
  9.      position: absolute;
  10.      bottom: 65px;
  11.      background: #fff
  12.  }
  13.  
  14.  .sliderImgPuzzleContainer {
  15.      position: relative;
  16.      text-align: center;
  17.      width: 325px;
  18.      height: 50px;
  19.      font-size: 14px;
  20.      line-height: 50px;
  21.      background: #f7f9fa;
  22.      color: #45494c;
  23.      border: 1px solid #e4e7eb
  24.  }
  25.  
  26.  .sliderImgPuzzleContainer_active .sliderImgPuzzle {
  27.      height: 48px;
  28.      top: -1px;
  29.      border: 1px solid #1991fa
  30.  }
  31.  
  32.  .sliderImgPuzzleContainer_active .sliderImgPuzzleMask {
  33.      height: 48px;
  34.      border-width: 1px
  35.  }
  36.  
  37.  .sliderImgPuzzleContainer_success .sliderImgPuzzle {
  38.      height: 48px;
  39.      top: -1px;
  40.      border: 1px solid #52ccba;
  41.      background-color: #52ccba !important
  42.  }
  43.  
  44.  .sliderImgPuzzleContainer_success .sliderImgPuzzleMask {
  45.      height: 48px;
  46.      border: 1px solid #52ccba;
  47.      background-color: #d2f4ef
  48.  }
  49.  
  50.  .sliderImgPuzzleContainer_success .sliderImgPuzzleIcon {
  51.      background-position: 0 0 !important
  52.  }
  53.  
  54.  .sliderImgPuzzleContainer_fail .sliderImgPuzzle {
  55.      height: 48px;
  56.      top: -1px;
  57.      border: 1px solid #f57a7a;
  58.      background-color: #f57a7a !important
  59.  }
  60.  
  61.  .sliderImgPuzzleContainer_fail .sliderImgPuzzleMask {
  62.      height: 48px;
  63.      border: 1px solid #f57a7a;
  64.      background-color: #fce1e1
  65.  }
  66.  
  67.  .sliderImgPuzzleContainer_fail .sliderImgPuzzleIcon {
  68.      top: 19px;
  69.      background-position: 0 -82px !important
  70.  }
  71.  
  72.  .sliderImgPuzzleContainer_active .sliderImgPuzzleText, .sliderImgPuzzleContainer_success .sliderImgPuzzleText, .sliderImgPuzzleContainer_fail .sliderImgPuzzleText {
  73.      visibility: hidden
  74.  }
  75.  
  76.  .sliderImgPuzzleMask {
  77.      position: absolute;
  78.      left:;
  79.      top:;
  80.      height: 50px;
  81.      border: 0 solid #1991fa;
  82.      background: #d1e9fe
  83.  }
  84.  
  85.  .sliderImgPuzzle {
  86.      position: absolute;
  87.      top:;
  88.      left:;
  89.      width: 50px;
  90.      height: 48px;
  91.      background: #fff;
  92.      box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  93.      cursor: pointer;
  94.      transition: background .2s linear
  95.  }
  96.  
  97.  .sliderImgPuzzle:hover {
  98.      background: #1991fa
  99.  }
  100.  
  101.  .sliderImgPuzzle:hover .sliderImgPuzzleIcon {
  102.      background-position: 0 -13px
  103.  }
  104.  
  105.  .sliderImgPuzzleIcon {
  106.      position: absolute;
  107.      top: 19px;
  108.      left: 17px;
  109.      width: 14px;
  110.      height: 12px;
  111.      background: url(../images/icon.png) 0 -26px;
  112.      background-size: 34px 471px
  113.  }
  114.  
  115.  .refreshIcon {
  116.      position: absolute;
  117.      right:;
  118.      top:;
  119.      width: 34px;
  120.      height: 34px;
  121.      cursor: pointer;
  122.      background: url(../images/icon.png) 0 -437px;
  123.      background-size: 34px 471px
  124.  }

　　组件js（sliderImgPuzzle.js）

  1.  ;(function ($) {
  2.      $.fn.SliderImgPuzzle = function (setting) {
  3.          var defaults = {callback: false}
  4.          var setting = $.extend(defaults, setting);
  5.          const l = 42, r = 10, w = 325, h = 155, PI = Math.PI
  6.          const L = l + r * 2
  7.  
  8.          function getRandomNumberByRange(start, end) {
  9.              return Math.round(Math.random() * (end - start) + start)
  10.          }
  11.  
  12.          function createCanvas(width, height) {
  13.              const canvas = createElement('canvas')
  14.              canvas.width = width
  15.              canvas.height = height
  16.              return canvas
  17.          }
  18.  
  19.          function createImg(onload) {
  20.              const img = createElement('img')
  21.              img.crossOrigin = "Anonymous"
  22.              img.onload = onload
  23.              img.onerror = () => {
  24.                  img.src = getRandomImg()
  25.              }
  26.              img.src = getRandomImg()
  27.              return img
  28.          }
  29.  
  30.          function createElement(tagName) {
  31.              return document.createElement(tagName)
  32.          }
  33.  
  34.          function addClass(tag, className) {
  35.              tag.classList.add(className)
  36.          }
  37.  
  38.          function removeClass(tag, className) {
  39.              tag.classList.remove(className)
  40.          }
  41.  
  42.          function getRandomImg() {
  43.              return 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 200)
  44.          }
  45.  
  46.          function draw(ctx, operation, x, y, type) {
  47.              if (type == 1)
  48.                  draw1(ctx, operation, x, y); else if (type == 2)
  49.                  draw2(ctx, operation, x, y); else if (type == 3)
  50.                  draw3(ctx, operation, x, y); else if (type == 4)
  51.                  draw4(ctx, operation, x, y); else if (type == 5)
  52.                  draw5(ctx, operation, x, y); else if (type == 6)
  53.                  draw6(ctx, operation, x, y);
  54.          }
  55.  
  56.          function draw6(ctx, operation, x, y) {
  57.              ctx.beginPath()
  58.              ctx.moveTo(x, y)
  59.              ctx.lineTo(x + l, y)
  60.              ctx.lineTo(x + l, y + l / 2)
  61.              ctx.arc(x + l + r - 4, y + l / 2, r, 0, 2 * PI)
  62.              ctx.lineTo(x + l, y + l / 2)
  63.              ctx.lineTo(x + l, y + l)
  64.              ctx.lineTo(x + l / 2, y + l)
  65.              ctx.arc(x + l / 2, y + l + 4, r, 0, 2 * PI)
  66.              ctx.lineTo(x + l / 2, y + l)
  67.              ctx.lineTo(x, y + l)
  68.              ctx.lineTo(x, y)
  69.              ctx.fillStyle = '#fff'
  70.              ctx[operation]()
  71.              ctx.beginPath()
  72.              ctx.arc(x + l / 2, y, r, 2 * PI, 1 * PI)
  73.              ctx.globalCompositeOperation = "xor"
  74.              ctx.fill()
  75.          }
  76.  
  77.          function draw5(ctx, operation, x, y) {
  78.              ctx.beginPath()
  79.              ctx.moveTo(x, y)
  80.              ctx.lineTo(x + l / 2, y)
  81.              ctx.arc(x + l / 2, y - r + 4, r, 0, 2 * PI)
  82.              ctx.lineTo(x + l / 2, y)
  83.              ctx.lineTo(x + l, y)
  84.              ctx.lineTo(x + l, y + l / 2)
  85.              ctx.arc(x + l + r - 4, y + l / 2, r, 0, 2 * PI)
  86.              ctx.lineTo(x + l, y + l / 2)
  87.              ctx.lineTo(x + l, y + l)
  88.              ctx.lineTo(x, y + l)
  89.              ctx.lineTo(x, y)
  90.              ctx.fillStyle = '#fff'
  91.              ctx[operation]()
  92.              ctx.beginPath()
  93.              ctx.arc(x + l / 2, y + l, r, 1 * PI, 2 * PI)
  94.              ctx.globalCompositeOperation = "xor"
  95.              ctx.fill()
  96.          }
  97.  
  98.          function draw4(ctx, operation, x, y) {
  99.              ctx.beginPath()
  100.              ctx.moveTo(x, y)
  101.              ctx.lineTo(x + l / 2, y)
  102.              ctx.arc(x + l / 2, y - r + 4, r, 0, 2 * PI)
  103.              ctx.lineTo(x + l / 2, y)
  104.              ctx.lineTo(x + l, y)
  105.              ctx.lineTo(x + l, y + l / 2)
  106.              ctx.arc(x + l + r - 4, y + l / 2, r, 0, 2 * PI)
  107.              ctx.lineTo(x + l, y + l / 2)
  108.              ctx.lineTo(x + l, y + l)
  109.              ctx.lineTo(x + l / 2, y + l)
  110.              ctx.arc(x + l / 2, y + l + 4, r, 0, 2 * PI)
  111.              ctx.lineTo(x + l / 2, y + l)
  112.              ctx.lineTo(x, y + l)
  113.              ctx.lineTo(x, y)
  114.              ctx.fillStyle = '#fff'
  115.              ctx[operation]()
  116.              ctx.beginPath()
  117.              ctx.arc(x, y + l / 2, r, 1.5 * PI, 0.5 * PI)
  118.              ctx.globalCompositeOperation = "xor"
  119.              ctx.fill()
  120.          }
  121.  
  122.          function draw3(ctx, operation, x, y) {
  123.              ctx.beginPath()
  124.              ctx.moveTo(x, y)
  125.              ctx.lineTo(x + l / 2, y)
  126.              ctx.lineTo(x + l, y)
  127.              ctx.lineTo(x + l, y + l / 2)
  128.              ctx.arc(x + l + r - 4, y + l / 2, r, 0, 2 * PI)
  129.              ctx.lineTo(x + l, y + l / 2)
  130.              ctx.lineTo(x + l, y + l)
  131.              ctx.lineTo(x + l / 2, y + l)
  132.              ctx.arc(x + l / 2, y + l + 4, r, 0, 2 * PI)
  133.              ctx.lineTo(x + l / 2, y + l)
  134.              ctx.lineTo(x, y + l)
  135.              ctx.lineTo(x, y)
  136.              ctx.fillStyle = '#fff'
  137.              ctx[operation]()
  138.              ctx.beginPath()
  139.              ctx.arc(x, y + l / 2, r, 1.5 * PI, 0.5 * PI)
  140.              ctx.globalCompositeOperation = "xor"
  141.              ctx.fill()
  142.          }
  143.  
  144.          function draw2(ctx, operation, x, y) {
  145.              ctx.beginPath()
  146.              ctx.moveTo(x, y)
  147.              ctx.lineTo(x + l / 2, y)
  148.              ctx.lineTo(x + l, y)
  149.              ctx.lineTo(x + l, y + l / 2)
  150.              ctx.arc(x + l + r - 4, y + l / 2, r, 0, 2 * PI)
  151.              ctx.lineTo(x + l, y + l / 2)
  152.              ctx.lineTo(x + l, y + l)
  153.              ctx.lineTo(x, y + l)
  154.              ctx.lineTo(x, y)
  155.              ctx.fillStyle = '#fff'
  156.              ctx[operation]()
  157.              ctx.beginPath()
  158.              ctx.arc(x, y + l / 2, r, 1.5 * PI, 0.5 * PI)
  159.              ctx.globalCompositeOperation = "xor"
  160.              ctx.fill()
  161.          }
  162.  
  163.          function draw1(ctx, operation, x, y) {
  164.              ctx.beginPath()
  165.              ctx.moveTo(x, y)
  166.              ctx.lineTo(x + l / 2, y)
  167.              ctx.arc(x + l / 2, y - r + 4, r, 0, 2 * PI)
  168.              ctx.lineTo(x + l / 2, y)
  169.              ctx.lineTo(x + l, y)
  170.              ctx.lineTo(x + l, y + l / 2)
  171.              ctx.arc(x + l + r - 4, y + l / 2, r, 0, 2 * PI)
  172.              ctx.lineTo(x + l, y + l / 2)
  173.              ctx.lineTo(x + l, y + l)
  174.              ctx.lineTo(x, y + l)
  175.              ctx.lineTo(x, y)
  176.              ctx.fillStyle = '#fff'
  177.              ctx[operation]()
  178.              ctx.beginPath()
  179.              ctx.arc(x, y + l / 2, r, 1.5 * PI, 0.5 * PI)
  180.              ctx.globalCompositeOperation = "xor"
  181.              ctx.fill()
  182.          }
  183.  
  184.          function sum(x, y) {
  185.              return x + y
  186.          }
  187.  
  188.          function square(x) {
  189.              return x * x
  190.          }
  191.  
  192.          class sliderImgPuzzle {
  193.              constructor({el, onSuccess, onFail, onRefresh}) {
  194.                  this.el = el
  195.                  this.onSuccess = onSuccess
  196.                  this.onFail = onFail
  197.                  this.onRefresh = onRefresh
  198.                  this.isEnable = true
  199.              }
  200.  
  201.              init() {
  202.                  this.initDOM()
  203.                  this.initImg()
  204.                  this.draw()
  205.                  this.bindEvents()
  206.                  return this;
  207.              }
  208.  
  209.              initDOM() {
  210.                  const canvas = createCanvas(w, h)
  211.                  const block = canvas.cloneNode(true)
  212.                  const canvasContainer = createElement('div')
  213.                  const sliderImgPuzzleContainer = createElement('div')
  214.                  const refreshIcon = createElement('div')
  215.                  const sliderImgPuzzleMask = createElement('div')
  216.                  const sliderImgPuzzle = createElement('div')
  217.                  const sliderImgPuzzleIcon = createElement('span')
  218.                  const text = createElement('span')
  219.                  canvasContainer.className = 'canvasContainer'
  220.                  block.className = 'block'
  221.                  sliderImgPuzzleContainer.className = 'sliderImgPuzzleContainer'
  222.                  refreshIcon.className = 'refreshIcon'
  223.                  sliderImgPuzzleMask.className = 'sliderImgPuzzleMask'
  224.                  sliderImgPuzzle.className = 'sliderImgPuzzle'
  225.                  sliderImgPuzzleIcon.className = 'sliderImgPuzzleIcon'
  226.                  text.innerHTML = '向右滑动滑块填充拼图'
  227.                  text.className = 'sliderImgPuzzleText'
  228.                  const el = this.el
  229.                  canvasContainer.appendChild(canvas)
  230.                  canvasContainer.appendChild(refreshIcon)
  231.                  canvasContainer.appendChild(block)
  232.                  el.appendChild(canvasContainer)
  233.                  sliderImgPuzzle.appendChild(sliderImgPuzzleIcon)
  234.                  sliderImgPuzzleMask.appendChild(sliderImgPuzzle)
  235.                  sliderImgPuzzleContainer.appendChild(sliderImgPuzzleMask)
  236.                  sliderImgPuzzleContainer.appendChild(text)
  237.                  el.appendChild(sliderImgPuzzleContainer)
  238.                  Object.assign(this, {
  239.                      canvas,
  240.                      block,
  241.                      canvasContainer,
  242.                      sliderImgPuzzleContainer,
  243.                      refreshIcon,
  244.                      sliderImgPuzzle,
  245.                      sliderImgPuzzleMask,
  246.                      sliderImgPuzzleIcon,
  247.                      text,
  248.                      canvasCtx: canvas.getContext('2d'),
  249.                      blockCtx: block.getContext('2d')
  250.                  })
  251.              }
  252.  
  253.              initImg() {
  254.                  const img = createImg(() => {
  255.                      this.canvasCtx.drawImage(img, 0, 0, w, h)
  256.                      this.blockCtx.drawImage(img, 0, 0, w, h)
  257.                      const y = this.y - r * 2 + 2
  258.                      const ImageData = this.blockCtx.getImageData(this.x, y, L + r + 4, L + r + 4)
  259.                      this.block.width = L
  260.                      this.blockCtx.putImageData(ImageData, 0, y)
  261.                  })
  262.                  this.img = img
  263.              }
  264.  
  265.              draw() {
  266.                  this.x = getRandomNumberByRange(L + 10, w - (L + 10))
  267.                  this.y = getRandomNumberByRange(10 + r * 2, h - (L + 10))
  268.                  var num = Math.floor(Math.random() * 6 + 1);
  269.                  draw(this.canvasCtx, 'fill', this.x, this.y, num)
  270.                  draw(this.blockCtx, 'clip', this.x, this.y, num)
  271.              }
  272.  
  273.              clean() {
  274.                  this.canvasCtx.clearRect(0, 0, w, h)
  275.                  this.blockCtx.clearRect(0, 0, w, h)
  276.                  this.block.width = w
  277.              }
  278.  
  279.              bindEvents() {
  280.                  this.el.onselectstart = () => false
  281.                  this.refreshIcon.onclick = () => {
  282.                      this.reset()
  283.                      typeof this.onRefresh === 'function' && this.onRefresh()
  284.                  }
  285.                  let originX, originY, trail = [], isMouseDown = false
  286.                  this.sliderImgPuzzle.ctrl = this;
  287.                  this.sliderImgPuzzle.addEventListener('mousedown', function (e) {
  288.                      if (!this.parentElement.parentElement.classList.contains("sliderImgPuzzleContainer_success")) {
  289.                          originX = e.x, originY = e.y
  290.                          isMouseDown = true
  291.                      }
  292.                      else {
  293.                          isMouseDown = false
  294.                      }
  295.                      if (!this.ctrl.isEnable) isMouseDown = false;
  296.                  })
  297.                  // this.sliderImgPuzzle.addEventListener('mouseover', function (e) {
  298.                  //     if (this.ctrl.isEnable)
  299.                  //         this.parentElement.parentElement.parentElement.querySelector(".canvasContainer").style.display = "block";
  300.                  // })
  301.                  // this.canvasContainer.parentElement.addEventListener('mouseleave', function (e) {
  302.                  //     this.querySelector(".canvasContainer").style.display = "none";
  303.                  // })
  304.                  document.addEventListener('mousemove', (e) => {
  305.                      if (!isMouseDown) return false
  306.                      const moveX = e.x - originX
  307.                      const moveY = e.y - originY
  308.                      if (moveX < 0 || moveX + 38 >= w) return false
  309.                      this.sliderImgPuzzle.style.left = moveX + 'px'
  310.                      var blockLeft = (w - 40 - 20) / (w - 40) * moveX
  311.                      this.block.style.left = blockLeft + 'px'
  312.                      addClass(this.sliderImgPuzzleContainer, 'sliderImgPuzzleContainer_active')
  313.                      this.sliderImgPuzzleMask.style.width = moveX + 'px'
  314.                      trail.push(moveY)
  315.                  })
  316.                  document.addEventListener('mouseup', (e) => {
  317.                      if (!isMouseDown) return false
  318.                      isMouseDown = false
  319.                      if (e.x == originX) return false
  320.                      removeClass(this.sliderImgPuzzleContainer, 'sliderImgPuzzleContainer_active')
  321.                      this.trail = trail
  322.                      const {spliced, TuringTest} = this.verify()
  323.                      if (spliced) {
  324.                          if (TuringTest) {
  325.                              addClass(this.sliderImgPuzzleContainer, 'sliderImgPuzzleContainer_success')
  326.                              typeof this.onSuccess === 'function' && this.onSuccess()
  327.                          } else {
  328.                              addClass(this.sliderImgPuzzleContainer, 'sliderImgPuzzleContainer_fail')
  329.                              this.text.innerHTML = '再试一次'
  330.                              this.reset()
  331.                          }
  332.                      } else {
  333.                          addClass(this.sliderImgPuzzleContainer, 'sliderImgPuzzleContainer_fail')
  334.                          typeof this.onFail === 'function' && this.onFail()
  335.                          setTimeout(() => {
  336.                              this.reset()
  337.                          }, 1000)
  338.                      }
  339.                  })
  340.              }
  341.  
  342.              verify() {
  343.                  const arr = this.trail
  344.                  const average = arr.reduce(sum) / arr.length
  345.                  const deviations = arr.map(x => x - average)
  346.                  const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length)
  347.                  const left = parseInt(this.block.style.left)
  348.                  return {spliced: Math.abs(left - this.x) < 10, TuringTest: average !== stddev,}
  349.              }
  350.  
  351.              reset() {
  352.                  this.sliderImgPuzzleContainer.className = 'sliderImgPuzzleContainer'
  353.                  this.sliderImgPuzzle.style.left = 0
  354.                  this.block.style.left = 0
  355.                  this.sliderImgPuzzleMask.style.width = 0
  356.                  this.clean()
  357.                  this.img.src = getRandomImg()
  358.                  this.draw()
  359.              }
  360.  
  361.              enablePuzzle(enable) {
  362.                  if (enable) {
  363.                      this.isEnable = true;
  364.                  }
  365.                  else this.isEnable = false;
  366.              }
  367.          }
  368.  
  369.          this.each(function () {
  370.              var $SliderImgPuzzle = $(this);
  371.              setting.el = $SliderImgPuzzle[0];
  372.              var sip = new sliderImgPuzzle(setting).init();
  373.              $SliderImgPuzzle.data("LsSliderImgPuzzle", sip);
  374.          });
  375.      }
  376.  })(jQuery);

　　组件HTML（sliderImgPuzzle.html）

  1.  <!DOCTYPE html>
  2.  <html lang="zh">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>滑动拼图验证码</title>
  6.      <link rel="stylesheet" href="../css/sliderImgPuzzle.css">
  7.      <style>
  8.          .container {
  9.              width: 310px;
  10.              margin: 300px auto;
  11.          }
  12.          input {
  13.              display: block;
  14.              width: 290px;
  15.              line-height: 40px;
  16.              margin: 10px 0;
  17.              padding: 0 10px;
  18.              outline: none;
  19.              border:1px solid #c8cccf;
  20.              border-radius: 4px;
  21.              color:#6a6f77;
  22.          }
  23.          #msg {
  24.              width: 100%;
  25.              line-height: 40px;
  26.              font-size: 14px;
  27.              text-align: center;
  28.          }
  29.          a:link,a:visited,a:hover,a:active {
  30.              margin-left: 100px;
  31.              color: #0366D6;
  32.          }
  33.  
  34.      </style>
  35.  </head>
  36.  <body>
  37.  <div class="container">
  38.      <div id="silderpuzzle" style="position: relative;padding-bottom: 15px;"></div>
  39.      <div id="msg"></div>
  40.      <button id="setenable">请先设置控件为可用</button>
  41.      <button id="setdisabled">设置控件不可用</button>
  42.      <button id="reflash">刷新控件</button>
  43.  </div>
  44.  <script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
  45.  <script src="../js/sliderImgPuzzle.js"></script>
  46.  <script>
  47.      //--------------------滑块拼图验证控件初始化-----
  48.      var option = {
  49.          onSuccess: function () {
  50.              document.getElementById('msg').innerHTML = '验证成功！'
  51.          },
  52.          onFail: cleanMsg,
  53.          onRefresh: cleanMsg
  54.      }
  55.      $("#silderpuzzle").SliderImgPuzzle(option);
  56.      //--------------------滑块拼图验证控件初始化完成-----
  57.  
  58.      //--------------------获取控件对象-----
  59.      var imgPuzzle = $("#silderpuzzle").data("LsSliderImgPuzzle");
  60.  
  61.      //--------------------回调函数
  62.      function cleanMsg() {
  63.          alert("回调函数")
  64.      }
  65.  
  66.      $("#setenable").on("click",function(){
  67.          //--------------------对象提供的enable的方法
  68.          imgPuzzle.enablePuzzle(true);
  69.      })
  70.      $("#setdisabled").on("click",function(){
  71.          //--------------------对象提供的enable的方法
  72.          imgPuzzle.enablePuzzle(false);
  73.      })
  74.      $("#reflash").on("click",function(){
  75.          //--------------------对象提供的enable的方法
  76.          imgPuzzle.reset();
  77.      })
  78.  </script>
  79.  </body>
  80.  </html>

总结：

　　该组件为轻量级组件，使用简单，一看便知。支持自定义扩展，如有不会的朋友可以拿来即用，非常方便！

GitHub地址：

　　https://github.com/TopSkyhua/SliderImgPuzzle

Web前端图形滑块检验组件实现的更多相关文章

  1. 二十三、【开源】EFW框架Web前端开发之常用组件（FusionCharts图表、ReportAll报表等）

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...

  2. 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)

    0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...

  3. web 前端常用组件【05】ZTree

    web 项目或多或少都会有涉及到什么人员职称树,菜单树,组织机构树等. 历手三四个项目有大有小,采用的树前端都是 Ztree. 有些优秀的J2EE 框架将这些常用的组件都封装起来,作为模块化的组件提供 ...

  4. Web前端性能优化教程04：压缩组件

    本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...

  5. web前端开发常用组件

    web前端开发常用组件 1. 对话框(dialog):jbox(适合对话框等其它功能).colorbox(也很强大,可以弥补jbox图片轮播的落点),      这二者基本能搞定所有对话框的情况 2. ...

  6. Web 前端 UI 组件库文档自动化方案 All In One

    Web 前端 UI 组件库文档自动化方案 All In One 需求 自动化 动态 好用 markdown element-ui 中示例和说明按照一定规则写在md文件中,调用md-loader将md文 ...

  7. 整理六百篇web前端知识混总

    9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...

  8. Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  9. HTML5零基础学习Web前端需要知道哪些？

    HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...

随机推荐

  1. 域名可以解析(ping域名可以获取正确ip)，服务器本地telnet 域名+端口 无法连接，通过建立本地虚拟域名指定的方法解决该问题

    环境: 服务器A,网管已为A开通外网ip,且设置有映射域名:假如内网ip为172.16.2.6.外网ip为123.123.123.123.域名为test.sstest.com 现象: 服务器A,tel ...

  2. jquery中通过trim() length 判断数据是否有值

    在jquery中可以通过如下方式判断某一个字符串是否有值,结合if else if 语句进行业务逻辑的处理 <!DOCTYPE html> <html lang="en&q ...

  3. git简易入门(github)

    本文讲解下git的使用,包括使用git上传项目工程到github,以及错误解决. 1.安装git 使用apt-get安 sudo apt-get update sudo apt-get install ...

  4. python基础知识梳理-----7函数

    基本内容梳理 1:函数定义,函数名,函数体以及函数的调用方式 2:函数的返回值 3:函数的参数 4:函数---动态传参数 5:名称空间,局部名称的加载顺序,全局名称空间,作用域,加载顺序 6:函数的嵌 ...

  5. JDK源码分析（10） ConcurrentLinkedQueue

    概述 我们要实现一个线程安全的队列有两种实现方法一种是使用阻塞算法,另一种是使用非阻塞算法.使用阻塞算法的队列可以用一个锁(入队和出队用同一把锁)或两个锁(入队和出队用不同的锁)等方式来实现,而非阻塞 ...

  6. Redis快照持久化

    Redis的持久化功能: redis为了内部数据的安全考虑,会把本身的数据以文件的形式保存到硬盘中一份,在服务器重启之后会自动把硬盘的数据恢复到内存(redis)里边. 数据保存到硬盘的过程就被称为” ...

  7. Android MediaPlayer 常用方法介绍

    Android MediaPlayer 常用方法介绍 方法:create(Context context, Uri uri) 解释:静态方法,通过Uri创建一个多媒体播放器. 方法:create(Co ...

  8. 查看和修改mysql数据库的最大链接数据

    通常,mysql的最大连接数默认是100, 最大可以达到16384.1.查看最大连接数:show variables like '%max_connections%';2.修改最大连接数方法一:修改配 ...

  9. 关于function构造函数特别注意的

    function在javascript中是对象,所以function持有构造函数例子:var a = new Function("x","y","re ...

  10. log4php0.9的详细配备实例说明

    一.什么是log4php: log4j在JAVA中可算是大名鼎鼎的日志开发包了,它为apche组织维护项目,VxR兄使用php来实现了log4j的功能, 目前log4php已经作为log4j的一个子项 ...