这篇文章上次修改于 834 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

缘由

由于期末得交项目了,于是乎我又把上学期的项目给翻出来,当时写(CV)了一些有意思的JS,并且在很多个人博客中也出现过,如果需要,请自便(乖巧).

鼠标侧键监听

document.onmousedown = event => {
    switch (event.button) {
        case 0:
            console.log('点击鼠标左键!');
            break;
        case 1:
            console.log('点击鼠标中键!');
            break;
        case 2:
            console.log('点击鼠标右键!');
            break;
        case 3:
            console.log('点击鼠标侧键-后退!');
            break;
        case 4:
            console.log('点击鼠标侧键-前进!');
            break;
    }
}

滚动标题+切后台改变标题

先讲讲原理吧,常见的滚动标题是通过JS循环设置title元素来实现的,切后台改变,前台变回来用的是blur和focus这两个东西.示例:

这个功能在很多个人博客都能看到,比如本站(.

//网站打开后延迟开启执行滚动效果

setTimeout(() => {
newtitle();
}, 1200);

//滚动函数

function newtitle() {
//获取网站的标题

let text = document.title;
let timerID;
//标题超过长度后启用滚动

if (text.length > 6) {
//设置标题，从第二个字获取到末尾+标题的第一个字

document.title = text.substring(1, text.length) + text.substring(0, 1);
//获取标题长度

text = document.title.substring(0, text.length);
//600毫秒后继续调用这个函数进行递归，实现滚动的效果

timerID = setTimeout("newtitle()", 600);
}
}

// 用于临时存放原来的title内容

let title;

//替换函数

window.onblur = () => {
// onblur时先存下原来的title,再更改title内容

title = document.title;
document.title = " （╯‵□′）╯︵┴─┴ 快回来";

};
window.onfocus = () => {
// onfocus时原来的title不为空才替换回去,防止页面还没加载完成且onblur时title=undefined的情况

if (title) document.title = title;
}

有注释应该很好理解吧,如果有更好的方案欢迎探讨.

线条特效

这个东西还挺好玩的,但是我觉得太花里胡哨了.

/**
 * Copyright (c) 2016 hustcc
 * License: MIT
 * Version: v1.0.1
 * GitHub: https://github.com/hustcc/canvas-nest.js
**/
function() {
function n(n, e, t) {
return n.getAttribute(e) || t
}
function e(n) {
return document.getElementsByTagName(n)
}
function t() {
var t = e("script"),
o = t.length,
i = t[o - 1];
return {
l: o,
z: n(i, "zIndex", -1),//优先级

o: n(i, "opacity", .5),//透明度

c: n(i, "color", "130,205,220"),//颜色

n: n(i, "count", 88)//点的数量

}
}
function o() {
a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
function i() {
r.clearRect(0, 0, a, c);
var n, e, t, o, m, l;
s.forEach(function(i, x) {
for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e], null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
}), x(i)
}
var a, c, u, m = document.createElement("canvas"),
d = t(),
l = "c_n" + d.l,
r = m.getContext("2d"),
x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(n) {
window.setTimeout(n, 1e3 / 45)
}, w = Math.random, y = {
x: null,
y: null,
max: 2e4
};
m.id = l, m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o, e("body")[0].appendChild(m), o(), window.onresize = o, window.onmousemove = function(n) {
n = n || window.event, y.x = n.clientX, y.y = n.clientY
}, window.onmouseout = function() {
y.x = null, y.y = null
};
for (var s = [], f = 0; d.n > f; f++) {
var h = w() * a,
g = w() * c,
v = 2 * w() - 1,
p = 2 * w() - 1;
s.push({
x: h,
y: g,
xa: v,
ya: p,
max: 6e3
})
}
u = s.concat([y]), setTimeout(function() {
i()
}, 100)
}();

几个关键参数的作用已经标注了,自己改就行了

鼠标点击特效-心型

因为鼠标特效还是挺多的,所以就细分了,以后可能还会补充别的吧

/*
main:主函数

setcss:设置css样式

create:感觉应该是用于控制的

creatdiv:新创建一个class为heart的div

randomcolor:随机颜色

removediv:控制heart的消失


*/
clearSelect = ("getSelection" in window ? window.getSelection().removeAllRanges() : document.selection.empty()),
((n, t) => {
let main = () => {
setcss(
".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-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: absolute;}" +
".heart:after{top: -5px;}" +
".heart:before{left: -5px;}"
);
create();
removediv()
}

function create() {
/*
如果n.onclick是函数并且存在,t=n.onclick

n.onclick=()=>{
t()=n.onclick()=creatediv(n)?
}
*/
let t = typeof n.onclick == "function" && n.onclick;
n.onclick = (n) => {
t && t();
creatediv(n)
}
}

function removediv() {
for (let n = 0; n < i.length; n++) {
if (i[n].alpha <= 0) {
t.body.removeChild(i[n].el);
i.splice(n, 1);
continue
}
i[n].y--;
i[n].scale += .004;
i[n].alpha -= .013;
i[n].el.style.cssText = "left:" +
i[n].x + "px;top:" +
i[n].y + "px;opacity:" +
i[n].alpha + ";transform:scale(" +
i[n].scale + "," +
i[n].scale + ") rotate(45deg);background:" +
i[n].color
}
requestAnimationFrame(removediv)
}

function creatediv(n) {
let heart = t.createElement("div");
heart.className = "heart";
i.push({
el: heart,
x: n.clientX - 5,
y: n.clientY - 5,
scale: 1,
alpha: 1,
color: randomcolor()
});
t.body.appendChild(heart)
}

function setcss(n) {
let i = t.createElement("style");
i.type = "text/css";
try {
i.appendChild(t.createTextNode(n))
} catch (r) {
i.styleSheet.cssText = n
}
t.getElementsByTagName("head")[0].appendChild(i)
}

function randomcolor() {
return "rgba(" +
~~(Math.random() * 256) + "," +
~~(Math.random() * 256) + "," +
~~(Math.random() * 256) + "," +
0.8 + ")";
}

let i = [];
n.requestAnimationFrame = (() => {
return n.requestAnimationFrame || n.webkitRequestAnimationFrame || n.mozRequestAnimationFrame ||
n.oRequestAnimationFrame || n.msRequestAnimationFrame || ((n) => {
setTimeout(n, 1e3 / 60)
})
})();
main();
})(window, document);

我拿到的源码是混淆过的,理解了半天,特别是create(),我想不通为什么这样写.