也想出現在這里?聯系我們

給WordPress博客網站添加評論輸入禮花及震動特效

2017.03.24 wordpress教程 ,
  • 文章介紹
  • 升級版本
  • 評價&建議

很久之前就在咸魚博客那里看到了這個輸入特效,雖然看起來太花哨了點,但我感覺認為這個特效還是挺不錯的,值得推薦,畢竟它給我們評論過程增加了點色彩~~

下面龍笑天下就來說說怎么實現的這個禮花及震動特效的,在本站評論處看看效果哦~ PS:震動效果被我關掉了,震的人有點難受...

首先,將下面的js代碼保存起來,命名activate-power-mode.js,并上傳到主題的JS文件夾中

  1. (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}}())}])});

然后,將以下代碼添加到主題的footer.php文件適當的位置。當然,也可以加一個判斷is_singular(),讓下面的js只在文章頁和頁面中加載。

  1. <script?src="<?php?bloginfo('template_directory');??>/includes/js/activate-power-mode.js?"></script>
  2. <script>
  3. POWERMODE.colorful?=?true;?//?ture?為啟用禮花特效
  4. POWERMODE.shake?=?false;?//?false?為禁用震動特效
  5. document.body.addEventListener('input',?POWERMODE);
  6. </script>

友情提示:因為僅涉及JS,本特效不僅限于wordpress中使用哦~

有用4
  • 2017.03.24初次和大家見面了!

等待您對該主題的建議

發表評論

還能輸入240個字

Hi, 歡迎加入Wordpress技術交流群,帶你裝逼帶你飛!

我要入群
也想出現在這里?聯系我們
wordpress加速

我來推薦一個更牛逼的給你看看?

  • 猛戳我吧
夫妇野外交换HD高清版,免费A片在线观看,亚洲精品国产自在现线,中国老妇人60OLDMANTV