WEB应用

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

Jager · 3月17日 · 2018年 1197次已读

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

简单的改进:

1、移动端关闭震动,移动端震动会显得很卡;

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

Ps:没什么技术含量,略懂 JS 语法的朋友完全可以自己继续发挥。

以下是简单的部署步骤(不限于 WordPress,标准 HTML 网页均可使用):

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,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=zhang.ge";
        }
    }
    /* 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').html() == closeshake ) {
            jQuery('.shakectrl').text(openshake);
            SetCookie("shakectrl", 0, 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 class="shakectrl" href="javascript:void(0);" title="打字震得难受?你可以自行控制~" style="color:red">关闭震动</a>

Ps:每个人网站风格不一样,这个按钮样式就不给 CSS 代码了,自行 DIY 修改吧。

效果预览:在本页留言即可看到效果。网站集成打字震动特效JS代码改进版

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

37 条回应
  1. Hunter 2018-3-17 · 14:20

    写的不错,一直挺喜欢大神的博客。希望有一天,通过慢慢地积累也能变成你一样。来试试效果,挺炫,就是打的字多了头晕,哈哈

  2. 安得养生网 2018-3-17 · 16:58

    这个是挺炫的,学习了。

  3. sys 2018-3-17 · 17:53

    各有所爱,我觉得特效比较晃眼

  4. 技术宅 2018-3-17 · 19:09

    可以的,每天都来看看,受益匪浅。 :grin:

  5. 西枫里博客 2018-3-18 · 12:24

    最多只能接受烟花,震动太变态了。

    • 龙笑天 2018-3-18 · 15:40

      [color=green]哈哈哈 震得很难受吧~ :grin: [/color]

      • 22 2020-2-12 · 14:36

    • 狂放 2018-3-21 · 20:05

      震一震更健康

  6. 九四君 2018-3-19 · 0:12

    你这评论是不是有改过。为啥跟我的不一样。怎么弄的有教程?

  7. 海志蓄电池 2018-3-19 · 13:27

    好东西。学习,看代码太累啦哈

  8. 沈唁志 2018-3-19 · 13:50

    :grin: Jager大神又更文了 抖一抖

  9. aunsen 2018-3-19 · 23:31

    这个效果可以的

  10. 小兵1945 2018-3-21 · 14:24

    厉害厉害,这个效果不错

  11. 明月登楼 2018-3-21 · 20:09

    这个特效现在真的是好火爆呀!Typecho上都看到好多在用的!

  12. 知网查重 2018-3-22 · 16:51

    卢松松博客过了的,路过! :evil:

  13. 七支剑 2018-3-23 · 15:35

    这是继车震之后的新震法么

  14. 明月登楼学习笔记Blog 2018-3-24 · 17:28

    嘿嘿,看到不少 Typecho 博客都用上这个特效了!

  15. RoseDiary 2018-3-25 · 11:32

    很好,效果很酷。有时间在我的博客试一下。

  16. 这个震动确实有点不习惯,我以为只是评论框震动,没想到整个网页都震动,哈哈

  17. 大事记 2018-3-30 · 19:37

    小特效对用户体验蛮好的,这种js压缩一下再用比较好。

  18. 林东煌博客 2018-4-14 · 5:21

    明天电脑上试一下效果。。。

  19. 杨泽业博客 2018-4-14 · 16:16

    来试一试,我也是觉得只是酷而已,看起来脑袋晕

  20. 凹凸学社 2018-4-16 · 10:11

    我就是来试试看看这个震动,有没有快感!
    果然感觉不一样,有高潮!
    速度可控,真是太爽了。

  21. BanYuner 2018-4-17 · 21:33

    我已经关闭了,感觉是真的头晕

  22. 青山 2018-4-29 · 13:41

    震一震,我想歪了

  23. 枫少 2018-5-8 · 16:19

    这个是很炫酷的啊 666

  24. 枫少 2018-5-8 · 16:20

    有博主吧这个集成到畅言里面吗

  25. 米秀街资讯 2018-5-26 · 17:49

    第一次来你的博客,评论的时候发现了这么个特效,感谢博主放出源码,我拿走了啊~ :lol:

  26. 枫少 2018-7-6 · 9:58

    震动这么好玩,不关闭多好

  27. 小云 2018-8-13 · 10:30

    写的很不错,其实很多东西都能在这里找到

  28. 枫少 2019-3-6 · 23:26

    真个是真的好玩啊,我又来玩一下震动

  29. 本质游戏 2019-5-6 · 17:35

    代码什么的不懂,但是看到您这很工整,注释很全。 :razz:

  30. 小菜鸟 2019-6-24 · 20:02

    看起来很厉害的样子

  31. 测试下效果 2019-10-24 · 10:10

    测试下效果,好震撼啊

  32. 北京监控安装 2019-10-26 · 16:31

    还是挺炫的,不过有点麻烦就是了

  33. 2020-2-20 · 7:10

    可以哈哈

  34. 2020-2-20 · 7:32

    打字烟花特效怎么弄的