[Discuz网站美化]如何添加代码实现富强民主文明鼠标点击效果

admin · 发表于 2018-5-1 13:04:54

1.以前大多数看到的是在Wordpress博客网站添加鼠标点击效果，但是呢目前还没有关于Discuz网站添加鼠标点击效果的实现步骤，下面就来实现一波；具体的代码我已经封装成了一个函数，addMousePower()函数，具体如下：

function addMousePower(){
/* 鼠标点击特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("").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();
});
});
});
}
window.onload = addMousePower;

复制代码

2.但是我们发现这段代码竟然是使用JQuery写的，如果直接拿来用的话肯定是不得行的，怎么办呢？经过笔者测试，Discuz网站的js模块集中在static/js/这个文件目录下，而且这里面的函数也基本上都是用JQuery写的，好的，问题解决！

3.我是把这块代码放在了common.js这个文件下了，经过测试是可以正常使用的，快去试试看！
注意事项：
1.在使用的时候别少了window.onload=addMousePower()这个函数，否则是没有效果的；
2.更改完毕之后记得去后台，工具里面更新一下缓存；
3.代码的具体位置可以放在common.js文件的最下面就行。

aya_xiyi · 发表于 2019-1-28 18:53:50

很有用，学习了

ubvtl · 发表于 2019-12-6 20:08:18

少有的分享

1032709949 · 发表于 2020-4-8 15:06:42

学习了

		自动登录	找回密码
密码			立即注册

[免费教程] [Discuz网站美化]如何添加代码实现富强民主文明鼠标点击效果

最佳新人

活跃会员

热心会员

推广达人

宣传达人

灌水之王

突出贡献

优秀版主

荣誉管理

论坛元老