点睛之笔,让你的网站变得与众不同——😄

Admin 2019-09-29 PM 1031℃ 2条

点睛之笔,让你的网站变得与众不同~~

将下列js代码 粘贴至 代码可运行到的 script 标签中,即可~
效果一:鼠标点击轮播——爱国文字

需要引入jQuery

"富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善"

此效果未找到原创出处,欢迎小伙伴们提供,支持原创~

//定义获取词语下标
var a_idx = 0;
jQuery(document).ready(function($) {
        //点击body时触发事件
    $("body").click(function(e) {
    //需要显示的词语
    var a = new Array("富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善");
    //设置词语给span标签
    var $i = $("<span/>").text(a[a_idx]);
    //下标等于原来下标+1  余 词语总数
    a_idx = (a_idx + 1)% a.length;
    //获取鼠标指针的位置,分别相对于文档的左和右边缘。
    //获取x和y的指针坐标
    var x = e.pageX, y = e.pageY;
    //在鼠标的指针的位置给$i定义的span标签添加css样式
    $i.css({"z-index" : 999999999999999999999999999999999999999999999999999999999999999999999,
        "top" : y - 20,
        "left" : x,
        "position" : "absolute",
        "font-weight" : "bold",
        "color" : "#ff6651"
        });
    //在body添加这个标签
    $("body").append($i);
        //animate() 方法执行 CSS 属性集的自定义动画。
        //该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果
        $i.animate({
        //将原来的位置向上移动180
            "top" : y - 180,
                "opacity" : 0
         //1500动画的速度
        }, 1500, function() {
        //时间到了自动删除
            $i.remove();
        });
    });
});
效果图

点睛之笔,让你的网站变得与众不同——😄


效果二:鼠标点击——铆效果

原创地址:https://juejin.im/post/5c808703f265da2dbd802605

    (function(window, document, undefined) {
    var hearts = [];
    window.requestAnimationFrame = (function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
            setTimeout(callback, 1000 / 60);
        }
    })();
    init();
    function init() {
        //css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
        css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px; left: -5px;}.heart:before{top: -5px; left: -5px;}");
        attachEvent();
        gameloop();
    }
    function gameloop() {
        for (var i = 0; i < hearts.length; i++) {
            if (hearts[i].alpha <= 0) {
                document.body.removeChild(hearts[i].el);
                hearts.splice(i, 1);
                continue;
            }
            hearts[i].y--;
            hearts[i].scale += 0.050;  //hearts[i].scale += 0.004;
            hearts[i].alpha -= 0.013;  //hearts[i].alpha -= 0.013;
            hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
        }
        requestAnimationFrame(gameloop);
    }
    function attachEvent() {
        var old = typeof window.onclick === "function" && window.onclick;
        window.onclick = function(event) {
            old && old();
            createHeart(event);
        }
    }
    function createHeart(event) {
        var d = document.createElement("div");
        d.className = "heart";
        hearts.push({
            el: d,
            x: event.clientX - 5,
            y: event.clientY - 5,
            scale: 1,
            alpha: 1,
            color: randomColor()
        });
        document.body.appendChild(d);
    }
    function css(css) {
        var style = document.createElement("style");
        style.type = "text/css";
        try {
            style.appendChild(document.createTextNode(css));
        } catch(ex) {
            style.styleSheet.cssText = css;
        }
        document.getElementsByTagName('head')[0].appendChild(style);
    }
    function randomColor() {
        return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")";
    }
})(window, document);
效果图

点睛之笔,让你的网站变得与众不同——😄


效果三:鼠标点击——水波纹效果

原创地址:https://blog.csdn.net/slzs_zyt/article/details/82688349

document.onclick = function(e) {
 
        /**
         * 根据鼠标点击坐标初始化dom,通过过渡属性实现动画效果
         * dom渲染完成后设置目标偏移位置及目标透明度
         * 过渡结束后移除dom
         * @author:slzs
         */
        var symbol = document.createElement("div");
 
        symbol.style.position = "absolute";
        symbol.style.left = (e.pageX) + "px";
        symbol.style.top = (e.pageY) + "px";
        symbol.style.zIndex = 9999;
        symbol.style.transition="all 1.5s";
        symbol.style.border="1px red solid";
        symbol.style.borderColor = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`; // 随机颜色
        symbol.style.borderRadius="100%";
        symbol.style.width = "0px";
        symbol.style.height = "0px";
         symbol.addEventListener("transitionend",function(et){ // 动画结束移除dom
             if(et.propertyName == "opacity" && et.srcElement.style.opacity==0)
                 et.srcElement.remove();
         });
 
        document.body.appendChild(symbol);
 
        requestAnimationFrame(()=>{
            symbol.style.width = "80px";
            symbol.style.margin = "-7px -40px";
            symbol.style.height = "14px";
            symbol.style.opacity = 0;
        });
    };
效果图

点睛之笔,让你的网站变得与众不同——😄


效果四:鼠标点击——Emoji 随机表情😀(强烈推荐)

原创地址:https://www.yancat.top/yam/522.html

window.onload = function () {
    let click_cnt = 0;
    let $html = document.getElementsByTagName("html")[0];
    let $body = document.getElementsByTagName("body")[0];
    $html.onclick = function (e) {
        let $elem = document.createElement("b");
        $elem.style.color = "#E94F06";
        $elem.style.zIndex = "9999";
        $elem.style.position = "absolute";
        $elem.style.select = "none";
        let x = e.pageX;
        let y = e.pageY;
        $elem.style.left = (x - 10) + "px";
        $elem.style.top = (y - 20) + "px";
        let anim;
        clearInterval(anim);
        let emoji = ["😃", "😄", "😁", "😆", "😅", "😂", "🤣", "☺", "😊", "😚", "😙", "😗", "😘", "😍", "😌", "😉", "🙃", "🙂", "😇", "😋", "😜", "😝", "😛", "🤑", "🤗", "🤓", "😎", "🤡", "🤠", "😖", "😣", "☹", "🙁", "😈", "🤕", "🤒", "😷", "🤧", "🤢", "👻", "💀", "☠", "👽", "👾", "🤖", "🎃", "😸", "😹", "🙏", "👏", "🙌", "👐", "😾", "😿", "🙀", "😽", "😼", "😻", "😀", "OωO", "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃", "╮(。>口<。)╭", "qzroc.com", "૮( ᵒ̌皿ᵒ̌ )ა", "(╯°口°)╯(┴—┴", "(๑•́ ∀ •̀๑)", "( ̄へ ̄)", "(๑•̀_•́๑)", "(๑•́ ₃ •̀๑)", "❤", "😀"];
        let emojis = emoji.sort(() => Math.random() - 0.5);
        switch (++click_cnt) {
            case 5:
                $elem.innerText = "qzroc.com";
                break;
            case 10:
                $elem.innerText = "谢谢访问哟~";
                break;
            default:
                for (let i = 0; i < emojis.length; i++) {
                    $elem.innerText = emojis[i];
                }
                break;
        }
        $elem.style.fontSize = Math.random() * 10 + 8 + "px";
        let increase = 0;
        setTimeout(function () {
            anim = setInterval(function () {
                if (++increase == 150) {
                    clearInterval(anim);
                    $body.removeChild($elem);
                }
                $elem.style.top = y - 20 - increase + "px";
                $elem.style.opacity = (150 - increase) / 120;
            }, 8);
        }, 70);
        $body.appendChild($elem);
    };
};
效果图

点睛之笔,让你的网站变得与众不同——😄


标签: none

非特殊说明,本博所有文章均为博主原创。

评论啦~


选择表情

已有 2 条评论


  1. cv
    cv

    fv

    回复 2020-04-20 09:09
    1. Admin
      Admin 博主

      ?

      回复 2020-04-22 17:44
×