WordPress博客添加评论输入特效

  • A+
所属分类：wordpress

给WordPress博客评论，搜索框添加输入特效，代码来自闲鱼博客，原作者已经不知道是谁了，看到好多人想要，我就分享给大家。

WordPress博客添加评论输入特效

调用代码

  1. <script src="JS文件路径"></script>
  2. <script>
  3. POWERMODE.colorful = true; // make power mode colorful  
  4. POWERMODE.shake = false; // turn off shake  
  5. document.body.addEventListener('input', POWERMODE);
  6. </script>

JS文件代码

  1. /*??*/
  2. /*??:www.mom1.cn*/
  3. (function webpackUniversalModuleDefinition(root, factory) {
  4. if(typeof exports === 'object' && typeof module === 'object')
  5.         module.exports = factory();
  6. else if(typeof define === 'function' && define.amd)
  7.         define([], factory);
  8. else if(typeof exports === 'object')
  9.         exports["POWERMODE"] = factory();
  10. else
  11.         root["POWERMODE"] = factory();
  12. })(this, function() {
  13. return /******/ (function(modules) { // webpackBootstrap
  14. /******/    // The module cache
  15. /******/    var installedModules = {};
  16. /******/    // The require function
  17. /******/    function __webpack_require__(moduleId) {
  18. /******/        // Check if module is in cache
  19. /******/        if(installedModules[moduleId])
  20. /******/            return installedModules[moduleId].exports;
  21. /******/        // Create a new module (and put it into the cache)
  22. /******/        var module = installedModules[moduleId] = {
  23. /******/            exports: {},
  24. /******/            id: moduleId,
  25. /******/            loaded: false
  26. /******/        };
  27. /******/        // Execute the module function
  28. /******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  29. /******/        // Flag the module as loaded
  30. /******/        module.loaded = true;
  31. /******/        // Return the exports of the module
  32. /******/        return module.exports;
  33. /******/    }
  34. /******/    // expose the modules object (__webpack_modules__)
  35. /******/    __webpack_require__.m = modules;
  36. /******/    // expose the module cache
  37. /******/    __webpack_require__.c = installedModules;
  38. /******/    // __webpack_public_path__
  39. /******/    __webpack_require__.p = "";
  40. /******/    // Load entry module and return exports
  41. /******/    return __webpack_require__(0);
  42. /******/ })
  43. /************************************************************************/
  44. /******/ ([
  45. /* 0 */
  46. /***/ function(module, exports, __webpack_require__) {
  47.     'use strict';
  48.     var canvas = document.createElement('canvas');
  49.     canvas.width = window.innerWidth;
  50.     canvas.height = window.innerHeight;
  51.     canvas.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:999999';
  52.     window.addEventListener('resize', function () {
  53.         canvas.width = window.innerWidth;
  54.         canvas.height = window.innerHeight;
  55.     });
  56.     document.body.appendChild(canvas);
  57.     var context = canvas.getContext('2d');
  58.     var particles = [];
  59.     var particlePointer = 0;
  60.     POWERMODE.shake = true;
  61.     function getRandom(min, max) {
  62. return Math.random() * (max - min) + min;
  63.     }
  64.     function getColor(el) {
  65. if (POWERMODE.colorful) {
  66.             var u = getRandom(0, 360);
  67. return 'hsla(' + getRandom(u - 10, u + 10) + ', 100%, ' + getRandom(50, 80) + '%, ' + 1 + ')';
  68.         } else {
  69. return window.getComputedStyle(el).color;
  70.         }
  71.     }
  72.     function getCaret() {
  73.         var el = document.activeElement;
  74.         var bcr;
  75. if (el.tagName === 'TEXTAREA' ||
  76.             (el.tagName === 'INPUT' && el.getAttribute('type') === 'text')) {
  77.             var offset = __webpack_require__(1)(el, el.selectionStart);
  78.             bcr = el.getBoundingClientRect();
  79. return {
  80.                 x: offset.left + bcr.left,
  81.                 y: offset.top + bcr.top,
  82.                 color: getColor(el)
  83.             };
  84.         }
  85.         var selection = window.getSelection();
  86. if (selection.rangeCount) {
  87.             var range = selection.getRangeAt(0);
  88.             var startNode = range.startContainer;
  89. if (startNode.nodeType === document.TEXT_NODE) {
  90.                 startNode = startNode.parentNode;
  91.             }
  92.             bcr = range.getBoundingClientRect();
  93. return {
  94.                 x: bcr.left,
  95.                 y: bcr.top,
  96.                 color: getColor(startNode)
  97.             };
  98.         }
  99. return { x: 0, y: 0, color: 'transparent' };
  100.     }
  101.     function createParticle(x, y, color) {
  102. return {
  103.             x: x,
  104.             y: y,
  105.             alpha: 1,
  106.             color: color,
  107.             velocity: {
  108.                 x: -1 + Math.random() * 2,
  109.                 y: -3.5 + Math.random() * 2
  110.             }
  111.         };
  112.     }
  113.     function POWERMODE() {
  114.         { // spawn particles
  115.             var caret = getCaret();
  116.             var numParticles = 5 + Math.round(Math.random() * 10);
  117. while (numParticles--) {
  118.                 particles[particlePointer] = createParticle(caret.x, caret.y, caret.color);
  119.                 particlePointer = (particlePointer + 1) % 500;
  120.             }
  121.         }
  122.         { // shake screen
  123. if (POWERMODE.shake) {
  124.                 var intensity = 1 + 2 * Math.random();
  125.                 var x = intensity * (Math.random() > 0.5 ? -1 : 1);
  126.                 var y = intensity * (Math.random() > 0.5 ? -1 : 1);
  127.                 document.body.style.marginLeft = x + 'px';
  128.                 document.body.style.marginTop = y + 'px';
  129.                 setTimeout(function() {
  130.                     document.body.style.marginLeft = '';
  131.                     document.body.style.marginTop = '';
  132.                 }, 75);
  133.             }
  134.         }
  135.     };
  136.     POWERMODE.colorful = false;
  137.     function loop() {
  138.         requestAnimationFrame(loop);
  139.         context.clearRect(0, 0, canvas.width, canvas.height);
  140. for (var i = 0; i < particles.length; ++i) {
  141.             var particle = particles[i];
  142. if (particle.alpha <= 0.1) continue;
  143.             particle.velocity.y += 0.075;
  144.             particle.x += particle.velocity.x;
  145.             particle.y += particle.velocity.y;
  146.             particle.alpha *= 0.96;
  147.             context.globalAlpha = particle.alpha;
  148.             context.fillStyle = particle.color;
  149.             context.fillRect(
  150.                 Math.round(particle.x - 1.5),
  151.                 Math.round(particle.y - 1.5),
  152. 3, 3
  153.             );
  154.         }
  155.     }
  156.     requestAnimationFrame(loop);
  157.     module.exports = POWERMODE;
  158. /***/ },
  159. /* 1 */
  160. /***/ function(module, exports) {
  161. /* jshint browser: true */
  162.     (function () {
  163. // The properties that we copy into a mirrored div.
  164. // Note that some browsers, such as Firefox,
  165. // do not concatenate properties, i.e. padding-top, bottom etc. -> padding,
  166. // so we have to do every single property specifically.
  167.     var properties = [
  168.       'direction',  // RTL support
  169.       'boxSizing',
  170.       'width',  // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
  171.       'height',
  172.       'overflowX',
  173.       'overflowY',  // copy the scrollbar for IE
  174.       'borderTopWidth',
  175.       'borderRightWidth',
  176.       'borderBottomWidth',
  177.       'borderLeftWidth',
  178.       'borderStyle',
  179.       'paddingTop',
  180.       'paddingRight',
  181.       'paddingBottom',
  182.       'paddingLeft',
  183. // https://developer.mozilla.org/en-US/docs/Web/CSS/font
  184.       'fontStyle',
  185.       'fontVariant',
  186.       'fontWeight',
  187.       'fontStretch',
  188.       'fontSize',
  189.       'fontSizeAdjust',
  190.       'lineHeight',
  191.       'fontFamily',
  192.       'textAlign',
  193.       'textTransform',
  194.       'textIndent',
  195.       'textDecoration',  // might not make a difference, but better be safe
  196.       'letterSpacing',
  197.       'wordSpacing',
  198.       'tabSize',
  199.       'MozTabSize'
  200.     ];
  201.     var isFirefox = window.mozInnerScreenX != null;
  202.     function getCaretCoordinates(element, position, options) {
  203.       var debug = options && options.debug || false;
  204. if (debug) {
  205.         var el = document.querySelector('#input-textarea-caret-position-mirror-div');
  206. if ( el ) { el.parentNode.removeChild(el); }
  207.       }
  208. // mirrored div
  209.       var div = document.createElement('div');
  210.       div.id = 'input-textarea-caret-position-mirror-div';
  211.       document.body.appendChild(div);
  212.       var style = div.style;
  213.       var computed = window.getComputedStyle? getComputedStyle(element) : element.currentStyle;  // currentStyle for IE < 9
  214. // default textarea styles
  215.       style.whiteSpace = 'pre-wrap';
  216. if (element.nodeName !== 'INPUT')
  217.         style.wordWrap = 'break-word';  // only for textarea-s
  218. // position off-screen
  219.       style.position = 'absolute';  // required to return coordinates properly
  220. if (!debug)
  221.         style.visibility = 'hidden';  // not 'display: none' because we want rendering
  222. // transfer the element's properties to the div
  223.       properties.forEach(function (prop) {
  224.         style[prop] = computed[prop];
  225.       });
  226. if (isFirefox) {
  227. // Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275
  228. if (element.scrollHeight > parseInt(computed.height))
  229.           style.overflowY = 'scroll';
  230.       } else {
  231.         style.overflow = 'hidden';  // for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll'
  232.       }
  233.       div.textContent = element.value.substring(0, position);
  234. // 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
  235. if (element.nodeName === 'INPUT')
  236.         div.textContent = div.textContent.replace(/\s/g, "\u00a0");
  237.       var span = document.createElement('span');
  238. // Wrapping must be replicated *exactly*, including when a long word gets
  239. // onto the next line, with whitespace at the end of the line before (#7).
  240. // The  *only* reliable way to do that is to copy the *entire* rest of the
  241. // textarea's content into the <span> created at the caret position.
  242. // for inputs, just '.' would be enough, but why bother?
  243.       span.textContent = element.value.substring(position) || '.';  // || because a completely empty faux span doesn't render at all
  244.       div.appendChild(span);
  245.       var coordinates = {
  246.         top: span.offsetTop + parseInt(computed['borderTopWidth']),
  247.         left: span.offsetLeft + parseInt(computed['borderLeftWidth'])
  248.       };
  249. if (debug) {
  250.         span.style.backgroundColor = '#aaa';
  251.       } else {
  252.         document.body.removeChild(div);
  253.       }
  254. return coordinates;
  255.     }
  256. if (typeof module != "undefined" && typeof module.exports != "undefined") {
  257.       module.exports = getCaretCoordinates;
  258.     } else {
  259.       window.getCaretCoordinates = getCaretCoordinates;
  260.     }
  261.     }());
  262. /***/ }
  263. /******/ ])
  264. });
  265. ;

教程

在根目录新建1个JS文件，然后复制上面的JS文件代码到文件内，或下载JS文件，上传网站根目录，在把调用代码放主题的footer.php文件里的<?php wp_footer(); ?>前面，调用代码里面的路径改为你放JS代码的路径。

根目录路径:网站域名+文件名称

https://www.mom1.cn/mom1.js

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: