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

这又是一个拖欠了良久的分享,很早就有同伙留言问谈论打字炫彩、震惊特效怎么实现的。这功效实在网上早就有人分享 N 遍了,有点搜索技巧和 DIY 能力的站长同砚也早就实现了。这里照样继续分享一下我这边的一些改善,也许有同伙可以用获得。

简朴的改善:

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

2、添加震惊开关,利便不喜欢的同伙举行关闭,接纳 Cookie 影象统一个浏览器点击关闭一次即可。

Ps:没什么手艺含量,略懂 JS 语法的同伙完全可以自己继续施展。以下是简朴的部署步骤(不限于 WordPress,尺度 HTML 网页均可使用):
1、将以下代码保留为 js 文件,好比 apm-min.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__){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 中引入如下代码(位置随意),其他网站程序可以集成到网页的页脚等位置:

  1. <!-- 这里的js改为第1步中的现实JS地址  -->
  2. <script src="//www.domain.com/wp-content/themes/begin/js/apm-min.js"></script>
  3. <script type="text/javascript">
  4.     /* Cookie写入函数 */
  5.     function SetCookie(sName, sValue,iExpireDays) {
  6.         domain='www.domain.com'; /*这里改成网站的现实域名*/
  7.         if (iExpireDays){
  8.             var dExpire = new Date();
  9.             dExpire.setTime(dExpire.getTime()+parseInt(iExpireDays*24*60*60*1000));
  10.             document.cookie = sName + "=" + escape(sValue) + "; expires=" + dExpire.toGMTString()+ "; path=/;domain="+domain;
  11.         }
  12.         else{
  13.             document.cookie = sName + "=" + escape(sValue)+ "; path=/;domain=zhangge.net";
  14.         }
  15.     }
  16.     /* Cookie获取函数 */ 
  17.     function GetCookie(sName) {
  18.         var arr = document.cookie.match(new RegExp("(^| )"+sName+"=([^;]*)(;|$)"));
  19.         if(arr != null){return unescape(arr[2])};
  20.         return null;
  21.  
  22.     }
  23.     var openshake  = '打开震惊';
  24.     var closeshake = '关闭震惊';                
  25.     POWERMODE.colorful = true; /* 彩色开关,改成false则关闭彩色显示 */
  26.     /* 默认开启震惊 */
  27.     if (GetCookie('shakectrl') == 1 || GetCookie('shakectrl') == null ) {
  28.     jQuery('.shakectrl').text(closeshake);
  29.         POWERMODE.shake = true;
  30.     } else {
  31.         jQuery('.shakectrl').text(openshake);
  32.         POWERMODE.shake = false;
  33.     }
  34.     /* 移动端不震惊 */ 
  35.     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){
  36.         POWERMODE.shake = false;
  37.     } else {
  38.         POWERMODE.shake = true;
  39.     }
  40.     /* 震惊点击开关功效 */   
  41.     jQuery(".shakectrl").click(function(){
  42.         if ( jQuery('.shakectrl').html() == closeshake ) {
  43.             jQuery('.shakectrl').text(openshake);
  44.             SetCookie("shakectrl", 0, 365);
  45.             POWERMODE.shake = false;
  46.         } else {
  47.             jQuery('.shakectrl').text(closeshake);
  48.             SetCookie("shakectrl", 1, 365);
  49.             POWERMODE.shake = true;
  50.         }
  51.  
  52.     });
  53.     /* 将特效绑定到input */
  54.     document.body.addEventListener('input', POWERMODE);      
  55. </script>

3、在想要泛起震惊开关的位置添加按钮代码:

  1. <a class="shakectrl" href="javascript:void(0);" title="打字震得难受?你可以自行控制~" style="color:red">关闭震惊</a>

Ps:每小我私人网站气概纷歧样,这个按钮样式就不给 CSS 代码了,自行 DIY 修改吧。效果预览:在 张戈博客 留言即可看到效果。
网站集成打字震动特效JS代码改进版
之前许多同伙留言说震惊太难受了,我只能说那么大个红色开关,你却置若罔闻?说明考察力有待提高啊!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 网站集成打字震动特效JS代码改进版 https://zhutizhen.com/14407.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务