html富强民主鼠标特效,html鼠标移动点击动画爱国民主文明和谐

鼠标特效

var a_idx=0;

jQuery(document).ready(function($){

addTips = 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()})

return false;

}

//绑定鼠标左键

$("body").click(addTips);

//绑定鼠标左键

$("body").bind("contextmenu",addTips)

});

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

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/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)

.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

}

}

目前在黑马培训javaee ,学到了前端这里,能做出一个自己喜欢的页面还挺开心的,贴一张图吧.