博客园添加鼠标点击特效

概述第一步:编写js文件 第一种:社会主义核心价值观特效 var a_idx = 0;jQuery(document).ready(function($) { $("body").click(function(e) {var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", 第一步:编写Js文件 第一种:社会主义核心价值观特效

var a_IDx = 0;jquery(document).ready(function($) {    $("body").click(function(e) {var a = new Array("富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善");var $i = $("<span/>").text(a[a_IDx]);        a_IDx = (a_IDx + 1) % a.length;var x = e.pageX,y = e.pageY;        $i.CSS({"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,"top": y - 20,"left": x,"position": "absolute","Font-weight": "bold","color": "#ff6651"        });        $("body").append($i);        $i.animate({"top": y - 180,"opacity": 0        },1500,function() {            $i.remove();        });    });});

第二种:爱心特效

(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;}");        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.004;            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);

第二步:将编辑好的Js文件上传到博客园文件中

上传完成后,右键复制文件链接,添加到页脚HTML引用该文件

第三步:页脚HTML引用该文件

<!-- 鼠标点击特效 --><script type="text/JavaScript" src="https://files.cnblogs.com/files/yad123/mouseHeart.Js"></script>

总结

以上是内存溢出为你收集整理的博客园添加鼠标点击特效全部内容，希望文章能够帮你解决博客园添加鼠标点击特效所遇到的程序开发问题。

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