网站集成打字震动特效JS代码改进版

概述这又是一个拖欠了很久的分享，很早就有朋友留言问评论打字炫彩、震动特效怎么实现的。这功能其实网上早就有人分享 N 遍了，有点搜索技巧和 DIY 能力的站长同学也早就实现了。

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

这又是一个拖欠了很久的分享，很早就有朋友留言问评论打字炫彩、震动特效怎么实现的。这功能其实网上早就有人分享 N 遍了，有点搜索技巧和 DIY 能力的站长同学也早就实现了。这里还是继续分享一下我这边的一些改进，也许有朋友可以用得到。

简单的改进：

1、移动端关闭震动，移动端震动会显得很卡；

2、添加震动开关，方便不喜欢的朋友进行关闭，采用 cookie 记忆同一个浏览器点击关闭一次即可。

Ps：没什么技术含量，略懂 Js 语法的朋友完全可以自己继续发挥。以下是简单的部署步骤（不限于 wordpress，标准 @R_404_6832@ 网页均可使用）：

1、将以下代码保存为 Js 文件，比如 apm-min.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__){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,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 地址：https://www.domain.com/wp-content/themes/begin/Js/apm-min.Js 能够在浏览器正常访问即可。

2、wordpress 在主题的评论模板文件 comments.PHP 中引入如下代码（位置随意），其他网站程序可以集成到网页的页脚等位置：

<!-- 这里的Js改为第1步中的实际Js地址 -->

<script src="//www.domain.com/wp-content/themes/begin/Js/apm-min.Js"></script>

<script type="text/JavaScript">

/* cookie写入函数 */

function setcookie(sname,sValue,IExpireDays) {

domain='www.domain.com'; /*这里改成网站的实际域名*/

if (IExpireDays){

var dExpire = new Date();

dExpire.setTime(dExpire.getTime()+parseInt(IExpireDays*24*60*60*1000));

document.cookie = sname + "=" + escape(sValue) + "; expires=" + dExpire.toGMTString()+ "; path=/;domain="+domain;

}

else{

document.cookie = sname + "=" + escape(sValue)+ "; path=/;domain=zhangge.net";

}

}

/* cookie获取函数 */

function Getcookie(sname) {

var arr = document.cookie.match(new RegExp("(^| )"+sname+"=([^;]*)(;|$)"));

if(arr != null){return unescape(arr[2])};

return null;

 

}

var openshake = '打开震动';

var closeshake = '关闭震动';

POWERMODE.colorful = true; /* 彩色开关，改成false则关闭彩色显示 */

/* 默认开启震动 */

if (Getcookie('shakectrl') == 1 || Getcookie('shakectrl') == null ) {

jquery('.shakectrl').text(closeshake);

POWERMODE.shake = true;

} else {

jquery('.shakectrl').text(openshake);

POWERMODE.shake = false;

}

/* 移动端不震动 */

if(/iphone|ipod|ipad|AndroID|nokia|blackBerry|webos|webmate|bada|lg|ucweb|skyfire|sony|eriCSSon|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|mIDp|wap|mobile/i.test(navigator.userAgent.tolowerCase()) || Getcookie('shakectrl') == 0){

POWERMODE.shake = false;

} else {

POWERMODE.shake = true;

}

/* 震动点击开关功能 */

jquery(".shakectrl").click(function(){

if ( jquery('.shakectrl').@R_404_6832@() == closeshake ) {

jquery('.shakectrl').text(openshake);

setcookie("shakectrl",365);

POWERMODE.shake = false;

} else {

jquery('.shakectrl').text(closeshake);

setcookie("shakectrl",1,365);

POWERMODE.shake = true;

}

 

});

/* 将特效绑定到input */

document.body.addEventListener('input',POWERMODE);

</script>

3、在想要出现震动开关的位置添加按钮代码：

<a href="JavaScript:voID(0);" title="打字震得难受？你可以自行控制~" >关闭震动</a>

Ps：每个人网站风格不一样，这个按钮样式就不给 CSS 代码了，自行 DIY 修改吧。效果预览：在 张戈博客 留言即可看到效果。

之前很多朋友留言说震动太难受了，我只能说那么大个红色开关，你却视而不见？说明观察力有待提高啊！

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的网站集成打字震动特效JS代码改进版全部内容，希望文章能够帮你解决网站集成打字震动特效JS代码改进版所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。