• <bdo id='o7awhjch'></bdo><ul id='37egsgha'></ul>

    <small id='vnk32cck'></small><noframes id='s95nfgs8'>

  • <legend id='blcws3hz'><style id='f9coek9s'><dir id='yi45df4y'><q id='iz8nfntd'></q></dir></style></legend>

    <tfoot id='iho0hxim'></tfoot>

        <i id='h4v515tk'><tr id='rn2qdmo6'><dt id='4al47nxn'><q id='muqlfnov'><span id='4q38d14w'><b id='e54bwmqs'><form id='kqxxz8z3'><ins id='8ijkn7cw'></ins><ul id='hzifde7d'></ul><sub id='k3tb0i15'></sub></form><legend id='vgsi8vyf'></legend><bdo id='y929etcb'><pre id='1tim2m9d'><center id='jzp2varb'></center></pre></bdo></b><th id='4fx3acxu'></th></span></q></dt></tr></i><div id='ov9bzk7w'><tfoot id='1pkpv0ud'></tfoot><dl id='3llvxxlr'><fieldset id='l8f8u7ui'></fieldset></dl></div>

      1. 精准传达 • 价值共享

        洞悉互联网前沿资讯,探寻网站营销规律

        庚午网络分享一个输入框的打字特效

        作者: 庚午网络 | 2020-12-11 12:29 |点击:

          • <small id='nj9y9rti'></small><noframes id='8510pp09'>

            <i id='4j4nukb4'><tr id='4f4qx871'><dt id='23waoqet'><q id='yxtxmkzt'><span id='s6og8du4'><b id='qqw7r9yy'><form id='hfxnnglw'><ins id='aa7g15h5'></ins><ul id='onrfkgjv'></ul><sub id='e3hgws2a'></sub></form><legend id='3t76rwuy'></legend><bdo id='d38aavm9'><pre id='484wkmth'><center id='5dl0gp66'></center></pre></bdo></b><th id='u28gskfe'></th></span></q></dt></tr></i><div id='6gaxrl1z'><tfoot id='pe3t7lnb'></tfoot><dl id='i8fjzuk1'><fieldset id='i4nuyh7v'></fieldset></dl></div>
              <legend id='ls9iinzb'><style id='xrhg5qho'><dir id='f7zndy6d'><q id='iol7yjfv'></q></dir></style></legend>

                  <bdo id='02yzvn8s'></bdo><ul id='q7tv6h1h'></ul>
                  <tfoot id='f9pu0w16'></tfoot>
                    <tbody id='0wxrers1'></tbody>
                • 在逛其他人博客的时候发现的,在输入框里打字有特效,就把这个特效扒了出来,鉴于今天有三个人都问了我这个效果怎么设置,故分享之。

                  下面是输入框的打字特效的演示效果
                  庚午网络分享一个输入框的打字特效

                  首先加载一个js文件,js代码如下

                  (function webpackUniversalModuleDefinition(root, factory) {
                      if(typeof exports === 'object' && typeof module === 'object')
                          module.exports = factory();
                      else if(typeof define === 'function' && define.amd)
                          define([], factory);
                      else if(typeof exports === 'object')
                          exports["POWERMODE"] = factory();
                      else
                          root["POWERMODE"] = factory();
                  })(this, function() {
                  return /******/ (function(modules) { // webpackBootstrap
                  /******/     // The module cache
                  /******/     var installedModules = {};
                  
                  /******/     // The require function
                  /******/     function __webpack_require__(moduleId) {
                  
                  /******/         // Check if module is in cache
                  /******/         if(installedModules[moduleId])
                  /******/             return installedModules[moduleId].exports;
                  
                  /******/         // Create a new module (and put it into the cache)
                  /******/         var module = installedModules[moduleId] = {
                  /******/             exports: {},
                  /******/             id: moduleId,
                  /******/             loaded: false
                  /******/         };
                  
                  /******/         // Execute the module function
                  /******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
                  
                  /******/         // Flag the module as loaded
                  /******/         module.loaded = true;
                  
                  /******/         // Return the exports of the module
                  /******/         return module.exports;
                  /******/     }
                  
                  
                  /******/     // expose the modules object (__webpack_modules__)
                  /******/     __webpack_require__.m = modules;
                  
                  /******/     // expose the module cache
                  /******/     __webpack_require__.c = installedModules;
                  
                  /******/     // __webpack_public_path__
                  /******/     __webpack_require__.p = "";
                  
                  /******/     // Load entry module and return exports
                  /******/     return __webpack_require__(0);
                  /******/ })
                  /************************************************************************/
                  /******/ ([
                  /* 0 */
                  /***/ function(module, exports, __webpack_require__) {
                  
                      'use strict';
                  
                      var canvas = document.createElement('canvas');
                      canvas.width = window.innerWidth;
                      canvas.height = window.innerHeight;
                      canvas.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:999999';
                      window.addEventListener('resize', function () {
                          canvas.width = window.innerWidth;
                          canvas.height = window.innerHeight;
                      });
                      document.body.appendChild(canvas);
                      var context = canvas.getContext('2d');
                      var particles = [];
                      var particlePointer = 0;
                      var frames = 120;
                      var framesRemain = frames;
                      var rendering = false;
                      POWERMODE.shake = true;
                  
                      function getRandom(min, max) {
                          return Math.random() * (max - min) + min;
                      }
                  
                      function getColor(el) {
                          if (POWERMODE.colorful) {
                              var u = getRandom(0, 360);
                              return 'hsla(' + getRandom(u - 10, u + 10) + ', 100%, ' + getRandom(50, 80) + '%, ' + 1 + ')';
                          } else {
                              return window.getComputedStyle(el).color;
                          }
                      }
                  
                      function getCaret() {
                          var el = document.activeElement;
                          var bcr;
                          if (el.tagName === 'TEXTAREA' ||
                              (el.tagName === 'INPUT' && el.getAttribute('type') === 'text')) {
                              var offset = __webpack_require__(1)(el, el.selectionStart);
                              bcr = el.getBoundingClientRect();
                              return {
                                  x: offset.left + bcr.left,
                                  y: offset.top + bcr.top,
                                  color: getColor(el)
                              };
                          }
                          var selection = window.getSelection();
                          if (selection.rangeCount) {
                              var range = selection.getRangeAt(0);
                              var startNode = range.startContainer;
                              if (startNode.nodeType === document.TEXT_NODE) {
                                  startNode = startNode.parentNode;
                              }
                              bcr = range.getBoundingClientRect();
                              return {
                                  x: bcr.left,
                                  y: bcr.top,
                                  color: getColor(startNode)
                              };
                          }
                          return { x: 0, y: 0, color: 'transparent' };
                      }
                  
                      function createParticle(x, y, color) {
                          return {
                              x: x,
                              y: y,
                              alpha: 1,
                              color: color,
                              velocity: {
                                  x: -1 + Math.random() * 2,
                                  y: -3.5 + Math.random() * 2
                              }
                          };
                      }
                  
                      function POWERMODE() {
                          { // spawn particles
                              var caret = getCaret();
                              var numParticles = 5 + Math.round(Math.random() * 10);
                              while (numParticles--) {
                                  particles[particlePointer] = createParticle(caret.x, caret.y, caret.color);
                                  particlePointer = (particlePointer + 1) % 500;
                              }
                              framesRemain = frames;
                              if (!rendering) {
                                  requestAnimationFrame(loop);
                              }
                          }
                          { // shake screen
                              if (POWERMODE.shake) {
                                  var intensity = 1 + 2 * Math.random();
                                  var x = intensity * (Math.random() > 0.5 ? -1 : 1);
                                  var y = intensity * (Math.random() > 0.5 ? -1 : 1);
                                  document.body.style.marginLeft = x + 'px';
                                  document.body.style.marginTop = y + 'px';
                                  setTimeout(function() {
                                      document.body.style.marginLeft = '';
                                      document.body.style.marginTop = '';
                                  }, 75);
                              }
                          }
                      };
                      POWERMODE.colorful = false;
                  
                      function loop() {
                          if (framesRemain > 0) {
                              requestAnimationFrame(loop);
                              framesRemain--;
                              rendering = true;
                          } else {
                              rendering = false;
                          }
                          
                          context.clearRect(0, 0, canvas.width, canvas.height);
                          for (var i = 0; i < particles.length; ++i) {
                              var particle = particles[i];
                              if (particle.alpha <= 0.1) continue;
                              particle.velocity.y += 0.075;
                              particle.x += particle.velocity.x;
                              particle.y += particle.velocity.y;
                              particle.alpha *= 0.96;
                              context.globalAlpha = particle.alpha;
                              context.fillStyle = particle.color;
                              context.fillRect(
                                  Math.round(particle.x - 1.5),
                                  Math.round(particle.y - 1.5),
                                  3, 3
                              );
                          }
                      }
                      requestAnimationFrame(loop);
                  
                      module.exports = POWERMODE;
                  
                  
                  /***/ },
                  /* 1 */
                  /***/ function(module, exports) {
                  
                      /* jshint browser: true */
                  
                      (function () {
                  
                      // The properties that we copy into a mirrored div.
                      // Note that some browsers, such as Firefox,
                      // do not concatenate properties, i.e. padding-top, bottom etc. -> padding,
                      // so we have to do every single property specifically.
                      var properties = [
                        'direction',  // RTL support
                        'boxSizing',
                        'width',  // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
                        'height',
                        'overflowX',
                        'overflowY',  // copy the scrollbar for IE
                  
                        'borderTopWidth',
                        'borderRightWidth',
                        'borderBottomWidth',
                        'borderLeftWidth',
                        'borderStyle',
                  
                        'paddingTop',
                        'paddingRight',
                        'paddingBottom',
                        'paddingLeft',
                  
                        // https://developer.mozilla.org/en-US/docs/Web/CSS/font
                        'fontStyle',
                        'fontVariant',
                        'fontWeight',
                        'fontStretch',
                        'fontSize',
                        'fontSizeAdjust',
                        'lineHeight',
                        'fontFamily',
                  
                        'textAlign',
                        'textTransform',
                        'textIndent',
                        'textDecoration',  // might not make a difference, but better be safe
                  
                        'letterSpacing',
                        'wordSpacing',
                  
                        'tabSize',
                        'MozTabSize'
                  
                      ];
                  
                      var isFirefox = window.mozInnerScreenX != null;
                  
                      function getCaretCoordinates(element, position, options) {
                  
                        var debug = options && options.debug || false;
                        if (debug) {
                          var el = document.querySelector('#input-textarea-caret-position-mirror-div');
                          if ( el ) { el.parentNode.removeChild(el); }
                        }
                  
                        // mirrored div
                        var div = document.createElement('div');
                        div.id = 'input-textarea-caret-position-mirror-div';
                        document.body.appendChild(div);
                  
                        var style = div.style;
                        var computed = window.getComputedStyle? getComputedStyle(element) : element.currentStyle;  // currentStyle for IE < 9
                  
                        // default textarea styles
                        style.whiteSpace = 'pre-wrap';
                        if (element.nodeName !== 'INPUT')
                          style.wordWrap = 'break-word';  // only for textarea-s
                  
                        // position off-screen
                        style.position = 'absolute';  // required to return coordinates properly
                        if (!debug)
                          style.visibility = 'hidden';  // not 'display: none' because we want rendering
                  
                        // transfer the element's properties to the div
                        properties.forEach(function (prop) {
                          style[prop] = computed[prop];
                        });
                  
                        if (isFirefox) {
                          // Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275
                          if (element.scrollHeight > parseInt(computed.height))
                            style.overflowY = 'scroll';
                        } else {
                          style.overflow = 'hidden';  // for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll'
                        }
                  
                        div.textContent = element.value.substring(0, position);
                        // the second special handling for input type="text" vs textarea: spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037
                        if (element.nodeName === 'INPUT')
                          div.textContent = div.textContent.replace(/\s/g, "\u00a0");
                  
                        var span = document.createElement('span');
                        // Wrapping must be replicated *exactly*, including when a long word gets
                        // onto the next line, with whitespace at the end of the line before (#7).
                        // The  *only* reliable way to do that is to copy the *entire* rest of the
                        // textarea's content into the <span> created at the caret position.
                        // for inputs, just '.' would be enough, but why bother?
                        span.textContent = element.value.substring(position) || '.';  // || because a completely empty faux span doesn't render at all
                        div.appendChild(span);
                  
                        var coordinates = {
                          top: span.offsetTop + parseInt(computed['borderTopWidth']),
                          left: span.offsetLeft + parseInt(computed['borderLeftWidth'])
                        };
                  
                        if (debug) {
                          span.style.backgroundColor = '#aaa';
                        } else {
                          document.body.removeChild(div);
                        }
                  
                        return coordinates;
                      }
                  
                      if (typeof module != "undefined" && typeof module.exports != "undefined") {
                        module.exports = getCaretCoordinates;
                      } else {
                        window.getCaretCoordinates = getCaretCoordinates;
                      }
                  
                      }());
                  
                  /***/ }
                  /******/ ])
                  });
                  ;
                  JavaScript

                  然后在加入下面的代码即可

                  <script>
                  POWERMODE.colorful = true; // make power mode colorful
                  POWERMODE.shake = false; // turn off shake
                  document.body.addEventListener('input', POWERMODE);
                  </script>
                  二度创作,如有侵权请联系删除。如没特殊注明,文章均为庚午网络原创,转载请注明https://www.hngengwu.com/gengwuwenku/566.html

                      <bdo id='n08pjtxi'></bdo><ul id='a1lpjmvr'></ul>
                    <tfoot id='9c3fyz5h'></tfoot>
                    <i id='rg0wq6q8'><tr id='f31e1fh5'><dt id='sapftkxh'><q id='7xrq2goi'><span id='6386y4ff'><b id='106ismac'><form id='j4twj98x'><ins id='m5s4zmr1'></ins><ul id='0hxvfdhh'></ul><sub id='u945fv1j'></sub></form><legend id='3x0ck6jb'></legend><bdo id='zqkjnemy'><pre id='vbg6y83p'><center id='u5sooi51'></center></pre></bdo></b><th id='pgihe9mt'></th></span></q></dt></tr></i><div id='5y7zjrf7'><tfoot id='92tepwf3'></tfoot><dl id='mfmpanir'><fieldset id='zp50pfw0'></fieldset></dl></div>
                  1. <legend id='4s1fzfim'><style id='w0bq6a4i'><dir id='jrjoatzv'><q id='y3urn1qr'></q></dir></style></legend>
                    1. <small id='m7uk4125'></small><noframes id='500mqa1w'>

                      多一份策划方案,总有益处。

                      请直接添加技术总监微信联系咨询

                      网站设计 品牌营销

                      多一份参考,总有益处

                      联系庚午网络,获得专属《策划方案》及报价

                      咨询相关问题或预约面谈,可以通过以下方式与我们联系

                      业务热线:18574395938 / 大客户专线:18574395938