WordPress添加鼠标点击特效

​ 今天看别人网站的时候发现鼠标点击之后会出现好多小心心,还有的会出现文字.于是也想给自己的网站搞了一个,但是网上的资料写的都不是很好.按着步骤来,但还是实现不了那个结果.

​ 于是我去阳哥的网站去看了一下,因为他的网站有这个特性,目测应该是个js脚本,于是google开启F12模式,开爬.

出现一个love.js,应该就是了。于是火速下载下来。上传到wp-content/dux/js文件夹下。

在footer.php文件中的<?php wp_footer(); ?>上方引入该love.js脚本.

<script src="https://www.liupeng.mobi/wp-content/themes/dux/js/love.js"></script>

清理缓存就可以看到效果啦.防止脚本丢失.在这里粘出js代码

!function(e,r,t){function a(){for(var e=0;e<n.length;e++)n[e].alpha<=0?(r.body.removeChild(n[e].el),n.splice(e,1)):(n[e].y--,n[e].scale+=.004,n[e].alpha-=.013,n[e].el.style.cssText="left:"+n[e].x+"px;top:"+n[e].y+"px;opacity:"+n[e].alpha+";transform:scale("+n[e].scale+","+n[e].scale+") rotate(45deg);background:"+n[e].color+";z-index:99999");requestAnimationFrame(a)}var o,n=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},function(t){var a=r.createElement("style");a.type="text/css";try{a.appendChild(r.createTextNode(t))}catch(e){a.styleSheet.cssText=t}r.getElementsByTagName("head")[0].appendChild(a)}(".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: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o="function"==typeof e.onclick&&e.onclick,e.onclick=function(e){var t,a;o&&o(),t=e,(a=r.createElement("div")).className="heart",n.push({el:a,x:t.clientX-5,y:t.clientY-5,scale:1,alpha:1,color:"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}),r.body.appendChild(a)},a()}(window,document);

在查资料的过程中,还发现了一个点击鼠标的时候出现文字的特效,道理一样.在这里随手也记录一下吧

方法2:

直接在footer.php文件中的<?php wp_footer(); ?>上方添加如下代码

<script type="text/javascript">
/* 鼠标点击特效 */
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();
        });
    });
});
</script>

canvas-nest

今天还装了一个背景的特下,网上有现成的插件

canvas-nest

佛祖保佑

<!--
                     南无本师释迦侔尼佛
                        南无阿弥陀佛
                       南无观世音菩萨
                          _ooOoo_
                         o8888888o
                         88" . "88
                         (| -_- |)
                         O\  =  /O
                      ____/`---'\____
                    .'  \\|     |//  `.
                   /  \\|||  :  |||//  \
                  /  _||||| -:- |||||-  \
                  |   | \\\  -  /// |   |
                  | \_|  ''\---/''  |   |
                  \  .-\__  `-`  ___/-. /
                ___`. .'  /--.--\  `. . __
             ."" '<  `.___\_<|>_/___.'  >'"".
            | | :  `- \`.;`\ _ /`;.`/ - ` : | |
            \  \ `-.   \_ __\ /__ _/   .-` /  /
       ======`-.____`-.___\_____/___.-`____.-'======
                          `=---='
              佛祖保佑    网站正常    流量上涨
              权重上升    权重上升    权重上升
                  刘鹏博客&www.liupeng.mobi
-->