js特效之酷炫的彩虹圈

2021-06-07 04:03

阅读:484

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

标签:inf   overflow   hidden   speed   核心   tee   logo   move   har   

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






彩虹圈效果
‘;
};
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[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;
};


↑↑ 收缩


可以在屏幕上随便拖拽鼠标,或者点击“自动移动” - FPS:


↓↓ 重新显示



loading...


 

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

js特效之酷炫的彩虹圈

标签:inf   overflow   hidden   speed   核心   tee   logo   move   har   

原文地址:http://www.cnblogs.com/Aaron1Tall/p/7327923.html


评论


亲,登录后才可以留言!