wordpress鼠标点击特效

执念博客
2017-09-16 / 2 评论 / 20 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年05月05日,已超过48天没有更新,若内容或图片失效,请留言反馈。

不知大家有没有看到过别人的博客页面,鼠标每一次点击都会有文字出来然后慢慢移动消失,是不是觉得很炫酷,下面就带着大家给自己的博客添加这种效果。
首先,打开正在使用主题中的footer.php文件
复制下面的代码,然后放在

[code lang="php"]
<?php wp_footer(); ?>
[/code]
的上面,注意不要放错位置。(在最下面)
[code lang="js"]
<script>
/* 鼠标特效 */
/* 站点:执念博客
作者:执念
网址:http://zhinianblog.com
*/
var a_index = 0;
window.onload=function(){
var bo = document.getElementsByTagName("body")[0];
bo.onclick = function(e){
var e = e || window.event;
var x = e.pageX;
var y = e.pageY;
var a = new Array("执念", "博客");
var span = document.createElement("span");
span.style.position = "absolute";
span.style.top = y+"px";
span.style.left = x+"px";
span.style.opacity = 1;
span.style.zIndex = 99999999;
span.innerHTML = a[a_index];
a_index = (a_index+1)%a.length;
span.style.color = "red";
bo.appendChild(span);
animation(span,"opacity",0,2000);
var top = parseInt(getStyle(span,"top"));
animation(span,"top",top-200,2000);
function animation(obj,attr,value,time){
var nowTime = new Date();
var nowStyle = parseInt(getStyle(obj,attr));
var timer = setInterval(function(){
var n = (new Date() - nowTime)/time;
if(n>=1){
n=1;
removeElement(span);
clearInterval(timer);
}
if(attr=="opacity"){
obj.style[attr]=(nowStyle+n*(value-nowStyle));
}
obj.style[attr]=(nowStyle+n*(value-nowStyle))+"px";
},1000/60);
}
function getStyle(obj,attr){
//获得元素的属性
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
function removeElement(obj){
//删除节点
var parentElement = obj.parentNode;
if(parentElement){
parentElement.removeChild(obj);
}
}
}
}
</script>
[/code]
保存之后打开自己的网站,发现是不是随着鼠标点击就会出现你设置的文字了。

本文共 170 个字数,平均阅读时长 ≈ 1分钟
0

打赏

海报

正在生成.....

评论 (2)

取消
  1. 头像
    晓兔个人博客 Lv.1
    Windows 10 · Google Chrome
    沙发

    你博客上的爱心和星星也是这么弄出来的么

    回复
    1. 头像
      执念 Lv.6 作者
      Windows 10 · Google Chrome
      @ 晓兔个人博客

      是的,只需要将文字换成符号就可以了。我的是搜狗输入法的特殊符号

      回复