今天看别人网站的时候发现鼠标点击之后会出现好多小心心,还有的会出现文字.于是也想给自己的网站搞了一个,但是网上的资料写的都不是很好.按着步骤来,但还是实现不了那个结果.
于是我去阳哥的网站去看了一下,因为他的网站有这个特性,目测应该是个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
-->
评论前必须登录!
注册