文章教程

WordPress实现打字评论时震动效果

微信扫一扫,分享到朋友圈

WordPress实现打字评论时震动效果
1

其实说是WordPress震动效果,其他普通的html网站也可以实现这个打字效果,废话不多说,直接上教程

第一步:复制下面的代码记事本保存-重命名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>我的设置是zhendong.js

第二部:找到自己的主题下面的评论模板文件,一般是comments.php

复制下面这一串代码:注意的是需要改文件路径和域名

<!-- 这里的js改为第1步中的实际JS地址  -->
<script src="https://www.houhuan.cc/wp-content/themes/hh/js/zhendong.js"></script>
<script type="text/javascript">
    /* Cookie写入函数 */
    function SetCookie(sName, sValue,iExpireDays) {
        domain='www.houhuan.cc'; /*这里改成网站的实际域名*/
        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').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>

随便放到顶部和头部就行了,然后测试一下,看看你的评论框是不是抖动起来了

 

90后,思维跳跃双子座。 兴趣:游戏,网站,设计,UI。 志向:好好学习,好好挣钱才能做我想做的事情!

做个自私的自己

上一篇

wordpress小工具中添加一个文本小工具运行php代码

下一篇

你也可能喜欢

1 条评论

  1. 这个就很炫酷了 ,我都想一直打字下去了

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
WordPress实现打字评论时震动效果

长按储存图像,分享给朋友