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

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

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

先在你网站目录建立一个文件,我自己把它命名为: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

分享给朋友:

相关文章

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

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

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

Uconomix uMark 6.1 汉化中文版 专业的图像水印制作工具

Uconomix uMark 6.1 汉化中文版 专业的图像水印制作工具

Uconomix uMark Professional 6.1 汉化中文版是一款专业的水印工具,主要用于给图像添加文字或者图片水印。平常我们在发一些图片时为了保留文章或者图片的出处,一般都会加上水印。...

zblog侧边栏如何实现一图三按钮的效果?

zblog侧边栏如何实现一图三按钮的效果?

可能有的人不太明白什么是一图三按钮的效果,其实就是在侧边栏某一个文本工具中显示有一张图片和三个链接按钮,具体效果请移步参观飞翔勿扰博客站点侧边的一图三按钮效果,或见下图所示: 其实这个一图三按钮效果...

ZBlog建站10个常见的错误

一、忽略了ZBlog更新 这里提到的更新涉及:ZBlog核心(也就是ZBlog本身)的更新、所用的插件的更新、所用的主题的更新,不用的主题和插件最好全部删除,以免ZBlog的更新机...

ZBlog备份、恢复与搬家(换空间)方法

ZBlog备份、恢复与搬家(换空间)方法

ZBlog网站完整的备份包括两个主要部分:MySQL数据库 和 zb_users 目录下的主题(theme)、插件(plugin)和附件(upload)。一般的操作方法是:将数据库从旧站导出,然...

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

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

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

评论列表

访客
访客
10个月前 (09-26)

s

北京监控维修
10个月前 (09-07)

好复杂的样子阿

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

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

发表评论

访客

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