位置：首页>> 网络编程>> JavaScript>> javascript彩虹圈效果

javascript彩虹圈效果

　　发布时间：2011-08-05 19:10:45　

标签：javascript,特效

无意中看到一位学员的屏保，感觉挺有意思的，就把它实现了下来

效果如下：

<!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(/file/UploadPic/20118/5/logo-95.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(/file/UploadPic/20118/5/body_bg-17.gif) repeat-x 0 48px; height:85px; color:#fff;}#auto_play { width:107px; height:31px; background:url(/file/UploadPic/20118/5/btn-80.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=['/file/UploadPic/20118/5/qun_1-55.png', '/file/UploadPic/20118/5/qun_3-62.png', '/file/UploadPic/20118/5/qun_5-71.png', '/file/UploadPic/20118/5/qun_4-99.png', '/file/UploadPic/20118/5/qun_2-44.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>

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

运用知识点：

   1.事件对象
   2.DOM
   3.运动框架和碰撞运动
   4.随机数

投稿

javascript彩虹圈效果

猜你喜欢