浏览别的网站时看到鼠标点击特效和网页背景特效感觉挺有意思，所以去网上搜了搜教程，为本站加了个粒子背景特效；虽然不是什么太难的东西，不过还是想简单记录一下教程。
鼠标点击特效
这里给出两种鼠标点击特效：循环文字词语点击特效和随机二进制数字点击特效，二选一就行，效果如下。
| 循环文字词语点击特效 | 随机二进制数字点击特效 |
|---|---|
 |
 |
1.在服务器上找到 WordPress 站点目录，例如 /www/wwwroot/[站点文件名]
2.在目录底下找到 wp-content/themes/[WordPress使用的主题名称]/header.php
3.在 <head> 和 </head> 之中添加以下代码
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
4.再在目录底下找到 wp-content/themes/[WordPress使用的主题名称]/footer.php
5.在 </body> 之前添加以下代码
#循环文字词语点击特效
<!--mouse effects show start-->
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 99999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"//颜色随机
//"#2299DD" //固定颜色
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<!--mouse effects show end-->
#随机二进制数字点击特效
<!--mouse effects show start-->
<script>
jQuery(document).ready(function($) {
var _click_count=0;
$("body").bind("click",function(e){
var n=Math.round(Math.random()*100)+1;//生成100以内的随机数
if(n == 0) res= '0';
var res = '';
while(n != 0) {
res = n % 2 + res
n = parseInt(n / 2)
}//将n转化为二进制数res
var $i=$("<b>").text("+"+(res));
var x=e.pageX,y=e.pageY;//鼠标点击的坐标
$i.css({
"z-index":99999,
"top":y-15,
"left":x,
"position":"absolute",
"color":"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"//颜色随机
//"#2299DD" //固定颜色
});
$("body").append($i);
$i.animate({
"top":y-180,
"opacity":0
},
1500,
function(){$i.remove();}
);
e.stopPropagation();
});
});
</script>
<!--mouse effects show end-->
网页背景特效
这里设置的是 canvas-nest 也就是 canva-nest.js 我们可以通过它实现粒子特效，效果如下。
1.在服务器上找到 WordPress 站点目录，例如 /www/wwwroot/[站点文件名]
2.在目录底下找到 wp-content/themes/[WordPress使用的主题名称]/footer.php
3.在 </body> 之前添加下面的代码
<!--canvas-nest show start--> <script type="text/javascript" color="0,205,205" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script> <!--canvas-nest show end-->
- color 参数为背景粒子线颜色值
- opacity 参数为背景粒子线的透明度
- count 参数为背景粒子线的密度。友情提醒，太大容易导致页面卡死
1、本网站名称：缘本初见
2、本站永久网址：https://www.52ybcj.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
评论