js特效之酷炫的彩虹圈

Posted MrWwwu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js特效之酷炫的彩虹圈相关的知识，希望对你有一定的参考价值。

此代码非本人所写 望使用者不要拿来做商业用途 致谢！

<!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>彩虹圈效果</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 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>

 

此代码实现了当鼠标按住拖动的时候  鼠标会拖出一道道彩虹圈或者让鼠标自行移动并拖出一道道彩虹圈  是非常酷炫的js特效




































































































































































































































































































































以上是关于js特效之酷炫的彩虹圈的主要内容，如果未能解决你的问题，请参考以下文章

平常收藏的酷炫的Android开源特效库

整理一些酷炫的android特效开源代码---持续更新

案例如何用html5 制作canvas酷炫的网状图形动画特效

程序员的浪漫：如何用HTML+JS制作圣诞节雪花特效(附带源码)

css3制作酷炫的相册集动画

HTML+CSS+JS实现 ❤️酷炫3D瀑布流动画特效❤️