HTML5-特效

HTML5-特效-跟随鼠标的粒子

<!DOCTYPE html>
<html lang="en"><head><meta charset=utf-8><title>Liquid Particles - spielzeugz.de canvas experiment </title><meta name="description" content="HTML5/canvas demo, 500 particles to play around with." /><meta name="keywords" content="html5,canvas,javascript,particles,interactive,velocity,programming,flash" /><script type="text/javascript">
(function(){function C(){e.globalCompositeOperation="source-over";e.fillStyle="rgba(8,8,12,0.65)";e.fillRect(0,0,f,p);e.globalCompositeOperation="lighter";x=q-u;y=r-v;u=q;v=r;for(var d=0.86*f,l=0.125*f,m=0.5*f,t=Math.random,n=Math.abs,o=z;o--;){var h=A[o],i=h.x,j=h.y,a=h.a,b=h.b,c=i-q,k=j-r,g=Math.sqrt(c*c+k*k)||0.001,c=c/g,k=k/g;if(w&&g<m)var s=14*(1-g/m),a=a+(c*s+0.5-t()),b=b+(k*s+0.5-t());g<d&&(s=0.0014*(1-g/d)*f,a-=c*s,b-=k*s);g<l&&(c=2.6E-4*(1-g/l)*f,a+=x*c,b+=y*c);a*=B;b*=B;c=n(a);k=n(b);g=
0.5*(c+k);0.1>c&&(a*=3*t());0.1>k&&(b*=3*t());c=0.45*g;c=Math.max(Math.min(c,3.5),0.4);i+=a;j+=b;i>f?(i=f,a*=-1):0>i&&(i=0,a*=-1);j>p?(j=p,b*=-1):0>j&&(j=0,b*=-1);h.a=a;h.b=b;h.x=i;h.y=j;e.fillStyle=h.color;e.beginPath();e.arc(i,j,c,0,D,!0);e.closePath();e.fill()}}function E(d){d=d?d:window.event;q=d.clientX-m.offsetLeft-n.offsetLeft;r=d.clientY-m.offsetTop-n.offsetTop}function F(){w=!0;return!1}function G(){return w=!1}function H(){this.color="rgb("+Math.floor(255*Math.random())+","+Math.floor(255*
Math.random())+","+Math.floor(255*Math.random())+")";this.b=this.a=this.x=this.y=0;this.size=1}var D=2*Math.PI,f=1E3,p=560,z=600,B=0.96,A=[],o,e,n,m,q,r,x,y,u,v,w;window.οnlοad=function(){o=document.getElementById("mainCanvas");if(o.getContext){m=document.getElementById("outer");n=document.getElementById("canvasContainer");e=o.getContext("2d");for(var d=z;d--;){var l=new H;l.x=0.5*f;l.y=0.5*p;l.a=34*Math.cos(d)*Math.random();l.b=34*Math.sin(d)*Math.random();A[d]=l}q=u=0.5*f;r=v=0.5*p;document.οnmοusedοwn=
F;document.οnmοuseup=G;document.οnmοusemοve=E;setInterval(C,33);document.getElementById("output").innerHTML='interact with the mouse, occasionally click or hold down the mousebutton<br>More here: <a href="http://www.spielzeugz.de/lab">spielzeugz.de/lab</a> &nbsp; | &nbsp; Follow us on <a href="http://www.twitter.com/spielzeugz" target="_blank">Twitter</a> or <a href="http://plus.google.com/116743952899287181520" target="_blank">Google+</a>'}else document.getElementById("output").innerHTML="Sorry, needs a recent version of Chrome, Firefox, Opera, Safari, or Internet Explorer 9."}})();    	</script><link rel="stylesheet" type="text/css" href="experiment-pages.css" /></head><body><div id="outer"><div id="canvasContainer"><canvas id="mainCanvas" width="1000" height="560"></canvas><div id="output"></div></div></div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11054609-1");
pageTracker._trackPageview();
} catch(err) {}
</script></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/545836.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

HTML5-特效

相关文章

一气之下，手撸了一个抖音去水印的工具！

css 隐藏元素显示元素_使用CSS打印时如何隐藏元素？

C语言图形库——EasyX常用函数

Adobe_Audition消除人声

Java新特性：数据类型可以扔掉了？

Spyder：Python中机器学习的强大武器

C语言+数据结构总结

对内存重叠的深入认识

Android特效五种Toast具体解释

为什么阿里巴巴禁止使用BigDecimal的equals方法做等值比较？

日期getUTCMonth（）方法以及JavaScript中的示例

VB另类技巧（可以用于VBA）－指针的使用

动图演示：手撸堆栈的两种实现方法！

Java中的异常处理

数组copyWithin（）方法以及JavaScript中的示例

多图带你彻底理解Java中的21种锁！

杨辉三角——数组解决

作文议论文开头结尾

VS生成的exe文件如何在其他电脑上运行

dumpstack_Java Thread类的静态void dumpStack（）方法（带示例）