1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 textarea {
8 display: block;
9 font-size: 1.4rem;
10 padding: 18px 14px;
11 color: #adadad;
12 box-sizing: border-box;
13 width: 80%;
14 height: 100px;
15 padding: 10px 14px;
16 line-height: 1.5;
17 -moz-box-sizing: border-box;
18 box-sizing: border-box;
19 border-color: #efefef;margin:50px; resize:vertical;
20 max-height: 400px;
21 }
22 /* resize:horizontal 宽度可调整 */
23 </style>
24 </head>
25 <body>
26 <textarea class="comment-textarea" placeholder="说点什么吧..." tabindex="4" ></textarea >
27 <script type="text/javascript">
28 !(function webpackUniversalModuleDefinition(root, factory) {
29 if (typeof exports === 'object' && typeof module === 'object') module.exports = factory();
30 else if (typeof define === 'function' && define.amd) define([], factory);
31 else if (typeof exports === 'object') exports["POWERMODE"] = factory();
32 else root["POWERMODE"] = factory()
33 })(this, function() {
34 return (function(modules) {
35 var installedModules = {};
36
37 function __webpack_require__(moduleId) {
38 if (installedModules[moduleId]) return installedModules[moduleId].exports;
39 var module = installedModules[moduleId] = {
40 exports: {},
41 id: moduleId,
42 loaded: false
43 };
44 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
45 module.loaded = true;
46 return module.exports
47 }
48 __webpack_require__.m = modules;
49 __webpack_require__.c = installedModules;
50 __webpack_require__.p = "";
51 return __webpack_require__(0)
52 })([function(module, exports, __webpack_require__) {
53 'use strict';
54 var canvas = document.createElement('canvas');
55 canvas.width = window.innerWidth;
56 canvas.height = window.innerHeight;
57 canvas.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:999999';
58 window.addEventListener('resize', function() {
59 canvas.width = window.innerWidth;
60 canvas.height = window.innerHeight
61 });
62 document.body.appendChild(canvas);
63 var context = canvas.getContext('2d');
64 var particles = [];
65 var particlePointer = 0;
66 POWERMODE.shake = true;
67
68 function getRandom(min, max) {
69 return Math.random() * (max - min) + min
70 }
71 function getColor(el) {
72 if (POWERMODE.colorful) {
73 var u = getRandom(0, 360);
74 return 'hsla(' + getRandom(u - 10, u + 10) + ', 100%, ' + getRandom(50, 80) + '%, ' + 1 + ')'
75 } else {
76 return window.getComputedStyle(el).color
77 }
78 }
79 function getCaret() {
80 var el = document.activeElement;
81 var bcr;
82 if (el.tagName === 'TEXTAREA' || (el.tagName === 'INPUT' && el.getAttribute('type') === 'text')) {
83 var offset = __webpack_require__(1)(el, el.selectionStart);
84 bcr = el.getBoundingClientRect();
85 return {
86 x: offset.left + bcr.left,
87 y: offset.top + bcr.top,
88 color: getColor(el)
89 }
90 }
91 var selection = window.getSelection();
92 if (selection.rangeCount) {
93 var range = selection.getRangeAt(0);
94 var startNode = range.startContainer;
95 if (startNode.nodeType === document.TEXT_NODE) {
96 startNode = startNode.parentNode
97 }
98 bcr = range.getBoundingClientRect();
99 return {
100 x: bcr.left,
101 y: bcr.top,
102 color: getColor(startNode)
103 }
104 }
105 return {
106 x: 0,
107 y: 0,
108 color: 'transparent'
109 }
110 }
111 function createParticle(x, y, color) {
112 return {
113 x: x,
114 y: y,
115 alpha: 1,
116 color: color,
117 velocity: {
118 x: -1 + Math.random() * 2,
119 y: -3.5 + Math.random() * 2
120 }
121 }
122 }
123 function POWERMODE() {
124 {
125 var caret = getCaret();
126 var numParticles = 5 + Math.round(Math.random() * 10);
127 while (numParticles--) {
128 particles[particlePointer] = createParticle(caret.x, caret.y, caret.color);
129 particlePointer = (particlePointer + 1) % 500
130 }
131 } {
132 if (POWERMODE.shake) {
133 var intensity = 1 + 2 * Math.random();
134 var x = intensity * (Math.random() > 0.5 ? -1 : 1);
135 var y = intensity * (Math.random() > 0.5 ? -1 : 1);
136 document.body.style.marginLeft = x + 'px';
137 document.body.style.marginTop = y + 'px';
138 setTimeout(function() {
139 document.body.style.marginLeft = '';
140 document.body.style.marginTop = ''
141 }, 75)
142 }
143 }
144 };
145 POWERMODE.colorful = false;
146
147 function loop() {
148 requestAnimationFrame(loop);
149 context.clearRect(0, 0, canvas.width, canvas.height);
150 for (var i = 0; i < particles.length; ++i) {
151 var particle = particles[i];
152 if (particle.alpha <= 0.1) continue;
153 particle.velocity.y += 0.075;
154 particle.x += particle.velocity.x;
155 particle.y += particle.velocity.y;
156 particle.alpha *= 0.96;
157 context.globalAlpha = particle.alpha;
158 context.fillStyle = particle.color;
159 context.fillRect(Math.round(particle.x - 1.5), Math.round(particle.y - 1.5), 3, 3)
160 }
161 }
162 requestAnimationFrame(loop);
163 module.exports = POWERMODE
164 }, function(module, exports) {
165 (function() {
166 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'];
167 var isFirefox = window.mozInnerScreenX != null;
168
169 function getCaretCoordinates(element, position, options) {
170 var debug = options && options.debug || false;
171 if (debug) {
172 var el = document.querySelector('#input-textarea-caret-position-mirror-div');
173 if (el) {
174 el.parentNode.removeChild(el)
175 }
176 }
177 var div = document.createElement('div');
178 div.id = 'input-textarea-caret-position-mirror-div';
179 document.body.appendChild(div);
180 var style = div.style;
181 var computed = window.getComputedStyle ? getComputedStyle(element) : element.currentStyle;
182 style.whiteSpace = 'pre-wrap';
183 if (element.nodeName !== 'INPUT') style.wordWrap = 'break-word';
184 style.position = 'absolute';
185 if (!debug) style.visibility = 'hidden';
186 properties.forEach(function(prop) {
187 style[prop] = computed[prop]
188 });
189 if (isFirefox) {
190 if (element.scrollHeight > parseInt(computed.height)) style.overflowY = 'scroll'
191 } else {
192 style.overflow = 'hidden'
193 }
194 div.textContent = element.value.substring(0, position);
195 if (element.nodeName === 'INPUT') div.textContent = div.textContent.replace(/\s/g, "\u00a0");
196 var span = document.createElement('span');
197 span.textContent = element.value.substring(position) || '.';
198 div.appendChild(span);
199 var coordinates = {
200 top: span.offsetTop + parseInt(computed['borderTopWidth']),
201 left: span.offsetLeft + parseInt(computed['borderLeftWidth'])
202 };
203 if (debug) {
204 span.style.backgroundColor = '#aaa'
205 } else {
206 document.body.removeChild(div)
207 }
208 return coordinates
209 }
210 if (typeof module != "undefined" && typeof module.exports != "undefined") {
211 module.exports = getCaretCoordinates
212 } else {
213 window.getCaretCoordinates = getCaretCoordinates
214 }
215 }())
216 }])
217 });
/* 调用*/
218 POWERMODE.colorful = true;POWERMODE.shake = false;document.body.addEventListener('input', POWERMODE);
219 </script>
220 </body>
221 </html>