源码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>鼠标特效</title>
</head>
<body>
<script src="js/jquery-2.2.0.min.js"></script>
<script >
var a_idx=0;
jQuery(document).ready(function($){
addTips = function(e){
var a= new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
var i=$("<span />").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()})
return false;
}
//绑定鼠标左键
$("body").click(addTips);
//绑定鼠标左键
$("body").bind("contextmenu",addTips)
});
</script>
<script>
function o(w,v,i){
return w.getAttribute(v)||i
}
function j(i){
return document.getElementsByTagName(i)
}
function l(){
var i=j("script"),w=i.length,v=i[w-1];
return {l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}
}
function k(){
r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
function b(){
e.clearRect(0,0,r,n);
var w=[f].concat(t);
var x,v,A,B,z,y;
t.forEach(function(i){
i.x+=i.xa,
i.y+=i.ya,
i.xa*=i.x>r||i.x<0?-1:1,
i.ya*=i.y>n||i.y<0?-1:1,
e.fillRect(i.x-0.5,i.y-0.5,1,1);
for(v=0;v<w.length;v++){
x=w[v];
if(i!==x&&null!==x.x&&null!==x.y){
B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;
y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())
}
}
w.splice(w.indexOf(i),1)
}),m(b)
}
var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,
m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){
window.setTimeout(i,1000/45)
},
a=Math.random,f={x:null,y:null,max:20000};
u.className="particle_canvas";
var browserName = navigator.userAgent.toLowerCase();
if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
u.className += ' ie10_gte';
};
u.id=c;
u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;
j("body")[0].appendChild(u);
k(),window.οnresize=k;
window.οnmοusemοve=function(i){
i=i||window.event,
f.x=i.clientX,
f.y=i.clientY
},
window.οnmοuseοut=function(){
f.x=null,
f.y=null
};
for(var t=[],p=0;s.n>p;p++){
var h=a()*r,
g=a()*n,
q=2*a()-1,
d=2*a()-1;
t.push({x:h,y:g,xa:q,ya:d,max:6000})
}
setTimeout(function(){b()},100)
</script>
<style>
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%, 100% {
transform: rotate(0)
}
20%, 60% {
transform: rotate(-25deg)
}
40%, 80% {
transform: rotate(10deg)
}
}
@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
</style>
</body>
</html>
效果
