经常看到许多网站受骗我们输入评论的时分会呈现一些礼花绽放的效果,还有一些网站输入内容后网站页面会颤动起来,其实这些内容都是经过 JavaScript 代码来完成的,今天闲着无聊从网上挑选了一些代码,整理一下分享出来,希望可以协助大家尽快完成这一功用。
中心JS代码
将以下代码复制下来新建一个 .js 格式的文档,并以 activate-power-mode.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) { 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; 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) || '.'; 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 } } ()) }]) });
JS代码引入
将上面的中心代码保管成单一 js 文件后,将 activate-power-mode.js 文件丢到主标题录下恣意位置(普通为主题的 js 文件夹中),记住该文件途径,将其交换为下面代码中的途径即可。然后将下面这段代码丢到主题的 footer.php 文件中即可。
<!-- 评论框礼花绽放效果--> <script src="<?php bloginfo('template_directory'); ?>/diy/js/activate-power-mode.js "></script> <script> POWERMODE.colorful = true; // ture 为启用礼花特效 POWERMODE.shake = false; // false 为禁用震动特效 document.body.addEventListener('input', POWERMODE); </script>
代码中礼花绽放于页面震动效果可自主开启,大家依据本人需求开启即可。
感谢您的来访,获取更多精彩文章请收藏本站。
![](https://www.gyzsq.com/wp-content/uploads/2022/07/9259adea4619.gif)
© 版权声明
本站网络名称:
孤勇者社区
本站永久网址:
https://www.gyzsq.com
网站侵权说明:
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ324470778删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
喜欢就支持一下吧
相关推荐
评论 抢沙发
![头像](/wp-content/themes/zibll/img/avatar-default.png)
欢迎您留下宝贵的见解!