是你最爱的鼠标点击特效

鼠标点击特效qwq

其实本来不太想写博客美化的博客,感觉太睿智了
但是我搜到的博客们,更睿智
于是就有了这篇小博客,为您深入浅出的讲解深奥的js

首先呢,我们要知道显示在博客页面上的东西实际上都是html元素,
然后嘞,为了显示这个html元素就要引入深奥的javascript,

既然他是一个元素,就需要创建一个元素,于是就有了:

1
var heart = document.createElement("b");

然后嘞,在刚开始选中的时候禁用这个事件,就有了

1
heart.onselectstart = new Function('event.returnValue=false');

但是我不知道这个禁用是干啥的,下次再议。

再然后,既然他叫点击特效,所以,我们要让这个东西他能消失,于是就有了这个css

1
heart.style.cssText = "position: fixed;left:-100%;";

为了让他能有渐变的效果,于是我们要把透明度变小,然后稍微放大一丢丢,因为变浅了就看不到了嘛,于是有了一个函数,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var f = 12, // 字体大小
x = event.clientX - f / 2, // 横坐标
y = event.clientY - f, // 纵坐标
c = randomColor(), // 随机颜色
a = 1, // 透明度
s = 1.2; // 放大缩小
var timer = setInterval(function() {
if(a <= 0) {

document.body.removeChild(heart);

clearInterval(timer);

} else {
heart.style.cssText = "font-size:12px;cursor: default;position: fixed;
color:"+c+";left:"+x+"px;top:"+y+"px;opacity:"+a+";transform:scale("+s+");";
y--;
a -= 0.016;
s += 0.002;
}
}, 12)

这个变量名实在是太真实了。

最后,真的是最后了,为了让他能够有随机的颜色,我们知道js中的random可以随机出一个0到1之间的数,太完美了嘛,给他乘255,就是一个参数,三个参数就是一个颜色,所以:

1
2
3
4
function randomColor()
{
return "rgb(" + (~~(Math.random() * 255)) +","+(~~(Math.random() * 255))+","+(~~(Math.random() * 255))+")";
}

差点忘了最重要的事…
元素都要了还要插入的嘛…

所以innerHTML了解一下?

1
document.body.appendChild(heart).innerHTML = "等下给你看菠萝";

通过这个其实还可以插入图片噢…图片路径和博文同一路径噢。

完整代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
(function() {
window.onclick = function(event) {
var heart = document.createElement("b");
heart.onselectstart = new Function('event.returnValue=false');
var flag = Math.random();
if(flag > 0.5)
document.body.appendChild(heart).innerHTML = "<img src=\"images\\apple.png\"/>";
else
document.body.appendChild(heart).innerHTML = "等下给你看菠萝";

heart.style.cssText = "position: fixed;left:-100%;";

var f = 12, // 字体大小
x = event.clientX - f / 2, // 横坐标
y = event.clientY - f, // 纵坐标
c = randomColor(), // 随机颜色
a = 1, // 透明度
s = 1.2; // 放大缩小
var timer = setInterval(function() {
if (a <= 0) {
document.body.removeChild(heart);
clearInterval(timer);
} else {
heart.style.cssText = "font-size:12px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s + ");";
y--;
a -= 0.016;
s += 0.002;

}

}, 12)

}
// 随机颜色
function randomColor() {

return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";

}
}())

next主题的食用方式呢,就是先保存为一个js文件命名任意噢,
然后放在themes\next\source\js\src路径下,
下一步
themes\next\layout\ _layout.swig 文件下在body中引入这个js噢,

1
<script type="text/javascript" src="/js/src/你爱的名字.js"></script>

就效果就在本页面点点就知道惹qwq..