当前位置:首页 > 软件和技术分享 > 正文内容

利用JS实现网站评论和留言打字特效

彭淇4年前 (2017-10-14)软件和技术分享4682

先在你网站目录建立一个文件,我自己把它命名为:pengqi,后缀名为JS。建立后打开pengqi.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
      var installedModules = {};
      function __webpack_require__(moduleId) {
        if(installedModules[moduleId])
          return installedModules[moduleId].exports;
        var module = installedModules[moduleId] = {
          exports: {},
          id: moduleId,
          loaded: false
        };
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        module.loaded = true;
        return module.exports;
      }
      __webpack_require__.m = modules;
      __webpack_require__.c = installedModules;
      __webpack_require__.p = "";
      return __webpack_require__(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;
     
      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() {
          {
              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;
              }
          }
          { 
              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() {
          requestAnimationFrame(loop);
          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;
     },
     function(module, exports) {
      (function () {
      var properties = [
        'direction',
        'boxSizing',
        'width',
        'height',
        'overflowX',
        'overflowY', 
        'borderTopWidth',
        'borderRightWidth',
        'borderBottomWidth',
        'borderLeftWidth',
        'borderStyle',
        'paddingTop',
        'paddingRight',
        'paddingBottom',
        'paddingLeft',
        'fontStyle',
        'fontVariant',
        'fontWeight',
        'fontStretch',
        'fontSize',
        'fontSizeAdjust',
        'lineHeight',
        'fontFamily',
        'textAlign',
        'textTransform',
        'textIndent',
        'textDecoration',
        '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); }
        }
        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
        style.whiteSpace = 'pre-wrap';
        if (element.nodeName !== 'INPUT')
          style.wordWrap = 'break-word'; 
        style.position = 'absolute';
        if (!debug)
          style.visibility = 'hidden';
        properties.forEach(function (prop) {
          style[prop] = computed[prop];
        });
        if (isFirefox) {
          if (element.scrollHeight > parseInt(computed.height))
            style.overflowY = 'scroll';
        } else {
          style.overflow = 'hidden';
        }
        div.textContent = element.value.substring(0, position);
        if (element.nodeName === 'INPUT')
          div.textContent = div.textContent.replace(/\s/g, "\u00a0");
        var span = document.createElement('span');
        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;
      }
      }());
     }
     ])
    });
    ;

 接着在你网站主题的header.php、footer.php、网站后台 - 设置 - 首页底部信息, 其中任意一个地方添加以下代码就可以了。

<script type="text/javascript" src="JS路径/pengqi.js(js文件名)"></script><script>POWERMODE.colorful = true;POWERMODE.shake = false;document.body.addEventListener('input', POWERMODE);</script> 

扫描二维码推送至手机端访问。

版权声明:本文由淇云博客发布,如需转载请注明出处。

本文链接:https://www.pengqi.club/blog/151.html

相关文章

zblogPHP加密后台地址:输入问题和答案后方可访问

zblogPHP加密后台地址:输入问题和答案后方可访问

Z-BlogPHP 的后台地址也是众人皆知了,这样暴露后台地址很是危险,万一被有心之人利用,后果不堪设想,下面本站就给大家一个解决方法:解决方法1、将下列代码加入 Z-BlogPHP 主题目录下inc...

如何通过gzip和nginx来提高网站打开速度及整体性能

要知道,网站的打开速度取决于浏览器打开下载的网页文件大小。如果传输的页面内容文件减少,那你网站的打开速度一定会加快。特别是手机端的用户,打开网站速度受限于移动端网络,所以压缩网站页面内容显得至关重要。...

让Console漂亮起来,在浏览器控制台添加网站说明

让Console漂亮起来,在浏览器控制台添加网站说明

让喜欢按F12的访客不至于看到空空的控制台,console打印的文字是可以添加样式的,不过不是全部css效果都有效,这里只介绍一小部分样式。    \n是换行,...

不懂英文能靠建站卖站达到月入上万?

最近卖了几个站,所以想写篇文章分享一下我是如何靠搭建英文站来达到月入上万元。本篇文章纯分享为主,希望能给大家带去一些好的思路。本人之前一直是做中文站,比如www.academicphd.com这类站,...

WinSCP免费中文版V5.9.3.7136 (基于SSH的FTP客户端)下载

WinSCP免费中文版V5.9.3.7136 (基于SSH的FTP客户端)下载

WinSCP中文版是Martin Prikryl公司发布的基于SSH的FTP客户端软件。WinSCP界面清新简洁友好,用户能在较短的时间内掌握软件的使用。WinSCP是一个Wi...

百度网盘破解版-解除下载速度

百度网盘破解版-解除下载速度

相信很多站长都在使用百度网盘来进行文件的存储,百度网盘虽好,但有一点就比较坑爹了!那就是它限制了下载速度,今天博主就给大家带来一款百度网盘破解版,亲测可用哟!重要提示:百度账号一定要绑定QQ等第三方账...

评论列表

访客
访客
2年前 (2019-09-26)

s

北京监控维修
2年前 (2019-09-07)

好复杂的样子阿

唯美陌阡
4年前 (2017-10-14)

[code]签到成功!签到时间:2017/10/14 下午6:28:59,每日签到,生活更精彩![/code]

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。