流星会随着鼠标的方向划过，按紧鼠标左键可以增长流星的尾巴。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="zh-CN"> <head> <title>流星雨</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="content-language" content="zh-CN"> <style type="text/css"> body {margin:0;padding:0;background-color:#000000;font-size:0;overflow:hidden} div {margin:0;padding:0;position:absolute;font-size:0;overflow:hidden} canvas{background-color:#000000;overflow:hidden} </style> </head> <script type="text/javascript"> function $i(id) { return document.getElementById(id); } function $r(parent,child) { (document.getElementById(parent)).removeChild(document.getElementById(child)); } function $t(name) { return document.getElementsByTagName(name); } function $c(code) { return String.fromCharCode(code); } function $h(value) { return ('0'+Math.max(0,Math.min(255,Math.round(value))).toString(16)).slice(-2); } function _i(id,value) { $t('div')[id].innerHTML+=value; } function _h(value) { return !hires?value:Math.round(value/2); } function get_screen_size() { var w=document.documentElement.clientWidth; var h=document.documentElement.clientHeight; return Array(w,h); } var url=document.location.href; var flag=true; var test=true; var n=parseInt((url.indexOf('n=')!=-1)?url.substring(url.indexOf('n=')+2,((url.substring(url.indexOf('n=')+2,url.length)).indexOf('&')!=-1)?url.indexOf('n=')+2+(url.substring(url.indexOf('n=')+2,url.length)).indexOf('&'):url.length):512); var w=0; var h=0; var x=0; var y=0; var z=0; var star_color_ratio=0; var star_x_save,star_y_save; var star_ratio=256; var star_speed=4; var star_speed_save=0; var star=new Array(n); var color; var opacity=0.1; var cursor_x=0; var cursor_y=0; var mouse_x=0; var mouse_y=0; var canvas_x=0; var canvas_y=0; var canvas_w=0; var canvas_h=0; var context; var key; var ctrl; var timeout; var fps=0; function init() { var a=0; for(var i=0;i<n;i++) { star[i]=new Array(5); star[i][0]=Math.random()*w*2-x*2; star[i][1]=Math.random()*h*2-y*2; star[i][2]=Math.round(Math.random()*z); star[i][3]=0; star[i][4]=0; } var starfield=$i('starfield'); starfield.style.position='absolute'; starfield.width=w; starfield.height=h; context=starfield.getContext('2d'); context.fillStyle='rgb(0,0,0)'; context.strokeStyle='rgb(255,255,255)'; var adsense=$i('adsense'); adsense.style.left=Math.round((w-728)/2)+'px'; adsense.style.top=(h-15)+'px'; adsense.style.width=728+'px'; adsense.style.height=15+'px'; adsense.style.display='block'; } function anim() { mouse_x=cursor_x-x; mouse_y=cursor_y-y; context.fillRect(0,0,w,h); for(var i=0;i<n;i++) { test=true; star_x_save=star[i][3]; star_y_save=star[i][4]; star[i][0]+=mouse_x>>4; if(star[i][0]>x<<1) { star[i][0]-=w<<1; test=false; } if(star[i][0]<-x<<1) { star[i][0]+=w<<1; test=false; } star[i][1]+=mouse_y>>4; if(star[i][1]>y<<1) { star[i][1]-=h<<1; test=false; } if(star[i][1]<-y<<1) { star[i][1]+=h<<1; test=false; } star[i][2]-=star_speed; if(star[i][2]>z) { star[i][2]-=z; test=false; } if(star[i][2]<0) { star[i][2]+=z; test=false; } star[i][3]=x+(star[i][0]/star[i][2])*star_ratio; star[i][4]=y+(star[i][1]/star[i][2])*star_ratio; if(star_x_save>0&&star_x_save<w&&star_y_save>0&&star_y_save<h&&test) { context.lineWidth=(1-star_color_ratio*star[i][2])*2; context.beginPath(); context.moveTo(star_x_save,star_y_save); context.lineTo(star[i][3],star[i][4]); context.stroke(); context.closePath(); } } timeout=setTimeout('anim()',fps); } function move(evt) { evt=evt||event; cursor_x=evt.pageX-canvas_x; cursor_y=evt.pageY-canvas_y; } function key_manager(evt) { evt=evt||event; key=evt.which||evt.keyCode; switch(key) { case 27: flag=flag?false:true; if(flag) { timeout=setTimeout('anim()',fps); } else { clearTimeout(timeout); } break; case 32: star_speed_save=(star_speed!=0)?star_speed:star_speed_save; star_speed=(star_speed!=0)?0:star_speed_save; break; case 13: context.fillStyle='rgba(0,0,0,'+opacity+')'; break; } top.status='key='+((key<100)?'0':'')+((key<10)?'0':'')+key; } function release() { switch(key) { case 13: context.fillStyle='rgb(0,0,0)'; break; } } function mouse_wheel(evt) { evt=evt||event; var delta=0; if(evt.wheelDelta) { delta=evt.wheelDelta/120; } else if(evt.detail) { delta=-evt.detail/3; } star_speed+=(delta>=0)?-0.2:0.2; if(evt.preventDefault) evt.preventDefault(); } function start() { resize(); anim(); } function resize() { w=parseInt((url.indexOf('w=')!=-1)?url.substring(url.indexOf('w=')+2,((url.substring(url.indexOf('w=')+2,url.length)).indexOf('&')!=-1)?url.indexOf('w=')+2+(url.substring(url.indexOf('w=')+2,url.length)).indexOf('&'):url.length):get_screen_size()[0]); h=parseInt((url.indexOf('h=')!=-1)?url.substring(url.indexOf('h=')+2,((url.substring(url.indexOf('h=')+2,url.length)).indexOf('&')!=-1)?url.indexOf('h=')+2+(url.substring(url.indexOf('h=')+2,url.length)).indexOf('&'):url.length):get_screen_size()[1]); x=Math.round(w/2); y=Math.round(h/2); z=(w+h)/2; star_color_ratio=1/z; cursor_x=x; cursor_y=y; init(); } document.οnmοusemοve=move; document.οnkeypress=key_manager; document.οnkeyup=release; document.onmousewheel=mouse_wheel; if(window.addEventListener) window.addEventListener('DOMMouseScroll',mouse_wheel,false); </script> <body οnlοad="start()" οnresize="resize()" onorientatiοnchange="resize()" οnmοusedοwn="context.fillStyle='rgba(0,0,0,'+opacity+')'" οnmοuseup="context.fillStyle='rgb(0,0,0)'"> <canvas id="starfield" style="background-color:#000000"></canvas> <div id="adsense" style="position:absolute;background-color:transparent;display:none"> </div> </body> </html> 下面附上源码效果流星雨

转载于:https://www.cnblogs.com/mrjim/archive/2011/10/20/4475287.html

一个html5流星雨源码相关推荐

  1. html5游戏源码素材哪家强？Top3都在这！

    今天小编为大家整理出了一些html5游戏源码素材网站~ 身为游戏制作爱好者,html5游戏开发未来前景不错,对于游戏开发者而言,开发语言都只是工具,需要有一些游戏开发的实例进行引导,学习更深层次的技术 ...

  2. html5作品源码,码农网：12个效果奇特的HTML5动画赏析 | 附：源码演示

    本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 本文将为大家分享12个效果奇特的HTML5动画,HTML5强大的动画特性可以让你的网页变得更加生动和富有活力,交互性 ...

  3. C/C++ 如何快速解构一个系统的源码（如何看懂大型工程项目的源码）

    问: 研究一个开源系统源码的时候,总是不知道该从哪里研究. 我现在看源码从index文件开始看起,遇到包含的文件,就去看包含的文件, 包含的文件中又引用了其它的文件,总是觉得看来看去,很没有逻辑性. ...

  4. 一个http-request的源码及改进

    一个http-request的源码及改进 这个版本是基于Http-requesthttps://github.com/kevinsawicki/http-request进行升级的http-reques ...

  5. 飞机大战HTML5游戏源码，基于Canvas制作的网页版飞机大战游戏+飞机大战手机端

    简介: 飞机大战HTML5游戏源码是一款基于Canvas制作的网页版飞机大战游戏,画质精美的飞机大战手机端游戏源码 网盘下载地址: http://kekewangLuo.net/W1S2LQcqAT2 ...

  6. 分享网上找到的一个中国象棋源码

    代码的结构挺好,mvc模式的,给大家分享出来 原创不易,转载请注明出处:分享网上找到的一个中国象棋源码 部分代码 Controller.java package com.zuidaima.chess. ...

  7. 分享一个电影网站源码。自动抓取

    分享一个电影网站源码.下面是演示地址,可能UI方面有些不同. www.qwdianying.top 下载地址:https://pan.baidu.com/s/1VU16AkklpCZ-tiPCAZ51 ...

  8. 一个公告栏的源码（利用marquee作的）

    一个公告栏的源码(利用marquee作的) <MARQUEE οnmοuseοver=this.stop() οnmοuseοut=this.start() scrollAmount=1 scr ...

  9. html5指标源码,一个超准的技术指标源码！

    股票翻天印指标源码! N:=90;M:=3; 低:=REF(LLV(L,N),M); 低点:=REFDATE(低,DATE); RRF:低点=L AND ((C-L)>(O-C) OR (O-L ...

最新文章

  1. placement new机制初探
  2. 适合网页设计师的11个不错的Chrome插件
  3. 小白必看！JS中循环语句大集合
  4. 关键2招提升软件开发项目的利润
  5. Codeforces 906B. Seating of Students（构造+DFS）
  6. Jmeter之app性能测试（ios，android）
  7. 马斯克：俄罗斯火箭发动机非常棒 停售不会影响SpaceX
  8. DCDC电源中同步与异步的区别
  9. Python和MD5网站挂马检测程序
  10. 图像识别没你想的那么难！看完这篇你也能成专家
  11. 笔试题算法系列（五）百度2017买帽子
  12. 领克02linux车机怎么升级,你们想看的领克02长测报告来了，一篇读懂02的车机系统...
  13. MATLAB/Simulink模型开发乐高EV3 双足平衡机器人
  14. Docker--10张图带你深入理解Docker容器和镜像
  15. 导出RCP程序遇到错误
  16. PS 合并RGB通道 编辑单通道
  17. 骚操作！程序员埋下每隔几年就触发的逻辑炸弹 | 每日趣闻
  18. 交叉编译移植 FFMPEG X264 XVID 到 hi3531
  19. dr.oracle黑钻面膜,Dr.magic 黑金备长炭控油净致面膜好不好用？
  20. #你不知道的javascript上卷# 总结

热门文章

  1. HierarchicalBeanFactory
  2. python --- 线程
  3. koa --- [MVC实现之五]Model层的实现
  4. 开发者应警惕的七种糟糕职业规划错误
  5. 云计算：容器技术变革云计算，SaaS带动CaaS市场
  6. php 抽象类、接口和构析方法
  7. Netty实现原理浅析
  8. X3D.Studio编辑器界面介绍
  9. asp.net学习之ado.net（连接模式访问）
  10. 工业无线遥控器 SUNRF-1011RC