【妙味课堂】javascript彩虹圈效果

miaov2010 2011-06-15 02:49:14
加精
无意中看到一位朋友的屏保，感觉挺有意思的，就把它实现了下来

效果如下：



点击预览>>

源码地址>>

提示：
1.请在 chrome，safari或Firebox等高性能浏览器下运行
2.手动移动的时候 请按着鼠标 不要松手

运用知识点：

1.事件对象
2.DOM
3.运动框架和碰撞运动
4.随机数
...全文
1154 61 打赏 收藏 转发到动态 举报
写回复
用AI写文章
61 条回复
切换为时间正序
请发表友善的回复…
发表回复
不耐烦 2011-06-30
  • 打赏
  • 举报
 回复
妙味课堂~~ 经典经常看到你的身影
tianya00731 2011-06-22
  • 打赏
  • 举报
 回复
RUHE
hj3424361 2011-06-22
  • 打赏
  • 举报
 回复
每天回帖即可获得10分可用分！
miaov2010 2011-06-21
  • 打赏
  • 举报
 回复
[Quote=引用 57 楼 kkbac 的回复:]
看来不道德的事情还是需要人来做的啊.
图片地址
http://www.miaov.com/miaov_demo/color_ball/qun_1.png
http://www.miaov.com/miaov_demo/color_ball/qun_2.png
http://www.miaov.com/miaov_demo/color_ball/qun_3.png
http://www.m……
[/Quote]

哈哈 挺好的
a55015755 2011-06-21
  • 打赏
  • 举报
 回复
要求要地夺
kkbac 2011-06-21
  • 打赏
  • 举报
 回复


看来不道德的事情还是需要人来做的啊.
图片地址
http://www.miaov.com/miaov_demo/color_ball/qun_1.png
http://www.miaov.com/miaov_demo/color_ball/qun_2.png
http://www.miaov.com/miaov_demo/color_ball/qun_3.png
http://www.miaov.com/miaov_demo/color_ball/qun_4.png
http://www.miaov.com/miaov_demo/color_ball/qun_5.png
和文件同目录.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<style> 

body {background:black; margin:0; overflow:hidden;}

h1 { position:absolute; top:4px; left:10px; margin:0; width:430px; }

h1 a { width:256px; height:37px; float:left; background: url(logo.gif) no-repeat; }

h1 strong { float:left; font-size:14px; color:#FFCC66; padding-top:12px; font-weight: normal; font-family:arial; }

#fps { color:#94d37e; margin-left:10px;}

#bg {width:100%; height:100%; background:white; filter:alpha(opacity:50); opacity:0.5; position:absolute; left:0; top:0;}

#loading {position:absolute; top:50%; color:white; z-index:2; text-align:center; width:100%;}

img {position:absolute;}

#ctrl_pad {background:black url(body_bg.gif) repeat-x 0 48px; height:85px; color:#fff;}

#auto_play { width:107px; height:31px; background:url(btn.gif) no-repeat; border:none; color:#e1e1e1; font-size:12px; position:absolute; top:8px; left:450px; }

h2 { text-align:center; color: #524e69; width:100%; position:absolute; bottom:10px; left:0; font-size:16px; font-weight:normal; font-family:arial; }

h2 a { color: #524e69; text-decoration:none; }

h2 a:hover { border-bottom:1px dotted #00CCCC; color:#0cc; }

#info { color:#827ed3;font-size:14px; font-family:arial; font-weight:bold; position:absolute; top:15px; left:570px;}

.btn,#show_pad { position:absolute; top:16px; right:20px; color:#9a9a9a; text-decoration:none; font-size:12px; }

.btn:hover,#show_pad:hover { text-decoration:none; color:#ccc; }

em { color:#ccc; font-size:12px; font-weight:normal; font-style:normal; }

</style> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>妙味课堂 - JavaScript 彩虹圈 - www.miaov.com</title> 

<script type="text/javascript"> 

function getNow()

{

	return (new Date()).getTime();

}

 

function rnd(min, max)

{

	return parseInt((Math.random()*999999)%(max-min+1))+min;

}

 

window.onload=function ()

{

	//控制

	var oCtrl=document.getElementById('ctrl_pad');

	var oAutoPlay=document.getElementById('auto_play');

	var iAutoPlayTimer=0;

	var bManual=true;

	

	var SPEED_CNG_RATE=4;

	var SPEED_MAX=20;

	var AUTO_SAMP_RATE=1;

	

	oAutoPlay.onclick=function ()

	{

		if(this.value=='自动移动')

		{

			var x=rnd(0, document.documentElement.clientWidth);

			var y=rnd(0, document.documentElement.clientHeight);

			var xSpeed=rnd(-SPEED_MAX,SPEED_MAX);

			var ySpeed=rnd(-SPEED_MAX,SPEED_MAX);

			

			iAutoPlayTimer=setInterval(function (){

				if(!(samp++%AUTO_SAMP_RATE))

				{

					onMove(x, y);

				}

				x+=xSpeed;

				y+=ySpeed;

				

				if(x<=SIZE/2)xSpeed=rnd(0,SPEED_MAX);

				if(x>=document.documentElement.clientWidth-SIZE/2)xSpeed=-rnd(0,SPEED_MAX);

				

				if(y<=SIZE/2)ySpeed=rnd(0,SPEED_MAX);

				if(y>=document.documentElement.clientHeight-SIZE/2)ySpeed=-rnd(0,SPEED_MAX);

				

				if(xSpeed<-SPEED_MAX)

				{

					xSpeed+=rnd(0,SPEED_CNG_RATE);

				}

				else if(xSpeed>SPEED_MAX)

				{

					xSpeed+=rnd(-SPEED_CNG_RATE,0);

				}

				else

				{

					xSpeed+=rnd(-SPEED_CNG_RATE,SPEED_CNG_RATE);

				}

				

				if(ySpeed<-SPEED_MAX)

				{

					ySpeed+=rnd(0,SPEED_CNG_RATE);

				}

				else if(ySpeed>SPEED_MAX)

				{

					ySpeed+=rnd(-SPEED_CNG_RATE,0);

				}

				else

				{

					ySpeed+=rnd(-SPEED_CNG_RATE,SPEED_CNG_RATE);

				}

			}, 30);

			

			stop();

			

			this.value='手动移动';

			bManual=false;

		}

		else

		{

			restart();

			clearInterval(iAutoPlayTimer);

			this.value='自动移动';

			bManual=true;

		}

	};

	

	var oLogo=document.createElement('h1');

	var copyright=document.createElement('h2');

	oLogo.title="妙味课堂";

	oLogo.innerHTML='<a href="http://www.miaov.com/"></a><strong>—— JavaScript 彩虹圈</strong>';

	copyright.innerHTML='☆ <a href="http://bbs.miaov.com">论坛</a> ☆ <a href="http://www.miaov.com">妙味课堂(www.miaov.com)</a> ☆ <a href="http://www.miaov.com/course_detail_1.html.php">JavaScript课程</a> ☆';

	document.body.appendChild(oLogo);

	document.body.appendChild(copyright);

	

	var aEle=document.body.getElementsByTagName('*');

	for(i=0;i<aEle.length;i++)

	{

		aEle[i].onmousedown=function (ev)

		{

			(ev||event).cancelBubble=true;

		};

	}

	

	var bCanUse=false;

	

	//核心

	var oFps=document.getElementById('fps');

	var aSharps=[];

	var aImgs=[];

	var aSrc=['qun_1.png', 'qun_3.png', 'qun_5.png', 'qun_4.png', 'qun_2.png'];

	var count=0;

	var samp=0;

	var continue_count=0;

	var i=0;

	

	var lastIType=-1;

	

	var SAMP_RATE=3;

	var SPEED_RATE=20;

	var FPS_RATE=20;

	var SIZE=100;

	var CONTINUE_LEN=5;

	

	if(/safari/i.test(navigator.userAgent))

	{

		SPEED_RATE=45;

	}

	else if(/firefox/i.test(navigator.userAgent))

	{

		SPEED_RATE=30;

	}

	

	/*for(i=1;i<=5;i++)

	{

		aSrc.push('qun_'+i+'.png');

	}*/

	

	for(i=0;i<aSrc.length;i++)

	{

		aImgs[i]=new Image();

		aImgs[i].onload=function ()

		{

			count++;

			

			if(count==aSrc.length)

			{

				document.getElementById('bg').style.display='none';

				document.getElementById('loading').style.display='none';

				start();

			}

		};

		aImgs[i].onerror=function ()

		{

			document.getElementById('loading').innerHTML='<span style="color:red; font-weight:bold;">素材加载失败，请刷新后重试</span>';

		};

		aImgs[i].src=aSrc[i];

	}

	

	function onMove(x, y)

	{

		if(continue_count++%CONTINUE_LEN)

		{

			var iType=lastIType;

		}

		else

		{

			/*do

			{

				var iType=rnd(0, aImgs.length-1);

			}while(lastIType==iType);*/

			iType=(lastIType+1)%aSrc.length;

			

			lastIType=iType;

		}

		

		createImg(iType, x, y, 1000);

	}

	

	function createImg(index, l, t)

	{

		var oImg=document.createElement('img');

		oImg.src=aImgs[index].src;

		

		oImg.style.left=l+'px';

		oImg.style.top=t+'px';

		oImg.height=aImgs[index].height;

		oImg.width=aImgs[index].width;

		oImg.style.marginLeft=-oImg.width/2+'px';

		oImg.style.marginTop=-oImg.height/2+'px';

		

		document.body.appendChild(oImg);

		

		aSharps.push({obj: oImg, endTime: getNow(), speedX: aImgs[index].width/SPEED_RATE, speedY: aImgs[index].height/SPEED_RATE});

	}

	

	function stop()

	{

		document.onmousedown=null;

	}

	

	function restart()

	{

		document.onmousedown=fnHandlerMouseMove;

	}

	

	setTimeout(function (){

		if(!bCanUse)

		{

			oAutoPlay.onclick();

		}

	}, 3000);

	

	function fnHandlerMouseMove()

	{

		bCanUse=true;

		document.onmousemove=function (ev)

		{

			var oEvent=ev||event;

			

			if(!(samp++%SAMP_RATE))

			{

				onMove(oEvent.clientX, oEvent.clientY);

			}

			return false;

		};

		

		document.onmouseup=function ()

		{

			document.onmousemove=null;

			document.onmouseup=null;

		};

		return false;

	};

	

	function start()

	{

		document.onmousedown=fnHandlerMouseMove;

		

		var lastTime=0;

		var iShowFps=0;

		var lastMove=0;

		

		setInterval(function (){

			var iNow=getNow();

			

			var aNewSharps=[];

			

			if(iNow-lastMove>30)

			{

				for(i=0;i<aSharps.length;i++)

				{

					aSharps[i].obj.width=Math.max(aSharps[i].obj.offsetWidth-aSharps[i].speedX, 0);

					aSharps[i].obj.height=Math.max(aSharps[i].obj.offsetHeight-aSharps[i].speedY, 0);

					

					if(bManual)

						aSharps[i].obj.style.top=parseInt(aSharps[i].obj.style.top)-5+'px';

					

					aSharps[i].obj.style.marginLeft=-aSharps[i].obj.offsetWidth/2+'px';

					aSharps[i].obj.style.marginTop=-aSharps[i].obj.offsetHeight/2+'px';

					

					if(aSharps[i].obj.width==0 || aSharps[i].obj.height==0)

					{

						document.body.removeChild(aSharps[i].obj);

					}

					else

					{

						aNewSharps.push(aSharps[i]);

					}

				}

				

				aSharps=aNewSharps;

				lastMove=iNow;

			}

			

			if(!(iShowFps++%FPS_RATE))

			{

				oFps.innerHTML=parseInt(1000/(iNow-lastTime));

			}

			lastTime=iNow;

		}, 1);

	}

	

	if(/msie/i.test(navigator.userAgent))

	{

		alert('您当前正在使用IE浏览器，此浏览器性能较低，无法呈现本程序效果，建议换成火狐或Safari');

	}

};

document.oncontextmenu=function()

{

	return false;

};

</script> 

</head> 

 

<body> 

<div id="ctrl_pad"> 

	

	<a class="btn" href="javascript:;" onclick="document.getElementById('ctrl_pad').style.display='none';document.getElementById('show_pad').style.display='block';">↑↑ 收缩</a> 

	<div id="info"> 

		<em>可以在屏幕上随便拖拽鼠标，或者点击“自动移动”</em> - FPS:<span id="fps"></span> 

	</div> 

	<input id="auto_play" type="button" value="自动移动" /> 

	

</div> 

<a style="display:none;" id="show_pad" href="javascript:;" onclick="document.getElementById('ctrl_pad').style.display='block';document.getElementById('show_pad').style.display='none';">↓↓ 重新显示</a> 

<div id="bg"> 

</div> 

<div id="loading"> 

	loading...

</div> 

</body> 

</html>
lszhengjianghao 2011-06-21
  • 打赏
  • 举报
 回复
标记一个 ！！！
gnosisz 2011-06-21
  • 打赏
  • 举报
 回复
支持！支持！
shandongqujianwu 2011-06-20
  • 打赏
  • 举报
 回复
飘过..............................
hangly 2011-06-20
  • 打赏
  • 举报
 回复
　　　　　　　　　　　　　　　　　　　　◢██◣　　　　　　
　　　　　　　　　　　　　◢██████████◣　　　　　
　　　　　　　　　　　◢◣███████████◤　　　　　
　　　　　　　　◢████◥██████◤　　　　　　　　　
　　　◢█████████　　　███◤　　　　　　　　　　
　　　█████████◤　　◢████████◣　　　　　
　　　◥███████◤　　◢█████████◤　　　　　
　　　　◥██████　　　███◤　　████　　　　　　
　　　　　　　　███　　◢██　◢█◣◥███　　　　　　
　　　　　　　　███　　███　███　███　　　　　　
　　　　　　　　███　　███　███　███　　　　　　
　　　　　　　　███　　███　███　███　　　　　　
　　　　　　　　███　　███　███　███　　　　　　
　　　　　　　　███　　███◢██◤　███　　　　　　
　　　　　　　　███　　██████　◢███　　　　　　
　　　　◢██████　　◥█◤██◤　◥███　　　　　　
　　　　◥██████　　　　◢██　◢███◤　　　　　　
　　　　　　◥████　　　◢███　◥███◣　　　　　　
　　　　　　　　◥█◤　　◢███◤　　████◣　　　　　
　　　　　　　　　　　　◢███◤　　　◥████　　　　　
　　　　　　　　　　　◢███◤　　　　　◥███　　　　　
　　　　　　　　　　　◥█◤　　　　　　　　◥█◤
小堇 2011-06-20
  • 打赏
  • 举报
 回复
好啊 帮顶~~!
dark7yue 2011-06-19
  • 打赏
  • 举报
 回复
真不错。
shandongqujianwu 2011-06-19
  • 打赏
  • 举报
 回复
飘过...................
wesweeky 2011-06-19
  • 打赏
  • 举报
 回复
lz赞一个
miaov2010 2011-06-18
  • 打赏
  • 举报
 回复
[Quote=引用 38 楼 xwqfudimo 的回复:]

引用 10 楼 q107770540 的回复:
顶一个

可惜源码是收费附件。。

是啊，下载好麻烦
[/Quote]

恩 回头在 csdn 发一个
yfxucn 2011-06-18
  • 打赏
  • 举报
 回复
顶礼膜拜`~ 今天开始巩固下JavaScript ...
Jonly 2011-06-18
  • 打赏
  • 举报
 回复
效果是不错，速度好卡！
xwqfudimo 2011-06-18
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 q107770540 的回复:]
顶一个

可惜源码是收费附件。。
[/Quote]
是啊，下载好麻烦
疯疯癫癫 2011-06-18
  • 打赏
  • 举报
 回复
还得先注册网站
wochunshabi 2011-06-18
  • 打赏
  • 举报
 回复
牛比啊，最近在研究DOM，刚好学习下
加载更多回复（40）
03妙味课堂——javascript彩虹圈效果
03妙味课堂——javascript彩虹圈效果03妙味课堂——javascript彩虹圈效果
JavaScript教程--从入门到精通(PPT精简版)
JavaScript教程--从入门到精通PPT 精简版
1500个前端开发常用JavaScript特效
1500个前端开发常用JavaScript特效,实例超多，特效实用，欢迎下载学习
HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果
Rainyday.js 是一个轻量的 JavaScript 库，利用 HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果。Rainyday.js 尽可能的模拟现实的雨滴效果，几乎可以以假乱真了。
程序员/设计师能用上的 75 份速查表
75 份速查表，由 vikas 收集整理，包括：jQuery、HTML、HTML5、CSS、CSS3、JavaScript、Photoshop 、git、Linux、Java、Perl、PHP、Python、Ruby、Ruby on Rails、Scala、C#、SQLite、C++、C语言、Ubuntu、WordPress、Node.js、Oracle、NMAP、Mac OS X、Haskell、Unicode、PostgreSQL、Lisp、Matlab 等。
非技术区

2,100

社区成员

37,371

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 非技术区
社区管理员
  • 非技术区社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章