JS实现跟随鼠标闪烁转动色块的方法

前端技术 2023/09/04 JavaScript

本文实例讲述了JS实现跟随鼠标闪烁转动色块的方法。分享给大家供大家参考。具体实现方法如下：

复制代码 代码如下:
<html>
<head>
<title>JS跟随鼠标闪烁转动的色块</title>
</head>
<body>
<script language=\"JavaScript\">
<!--
if (document.all){
colours=new Array(\'ff0000\',\'00ff00\',\'3366ff\',\'ff00ff\',\'ffa500\',\'ffffff\',\'fff000\')
amount=colours.length;
YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,step=0.2,currStep=0,my=0,mx=0;
document.write(\'<div id=\"ie\" style=\"position:absolute;top:0;left:0;\"><div style=\"position:relative\">\');
for (i=0; i < amount; i++)
document.write(\'<div id=\"iestars\" style=\"position:absolute;top:0px;left:0px;height:50px;width:50px;font-family:Courier New;font-size:5px;color:\'+colours[i]+\';padding-top:20px;text-align:center\">.</div>\');
document.write(\'</div></div>\');
ini=1;
gstep=1;
function iMouse(){
my=event.y;mx=event.x;
}
document.onmousemove=iMouse
function dim(){
ini-=gstep;
dt=setTimeout(\'dim()\',10);
if (ini < 2){
clearTimeout(dt);
glow();
}
}
function glow(){
ini+=gstep;
gt=setTimeout(\'glow()\',10);
if (ini > 14){
clearTimeout(gt);
dim();
}
}
function stars(){
ie.style.top=document.body.scrollTop;
for (i=0; i < amount; i++)
 {
 var layer=iestars[i].style;
 layer.filter=\'glow(color=\'+colours[i]+\', strength=\'+ini+\')\';
 layer.top= Ydelay+100*Math.sin((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);
 layer.left=Xdelay+180*Math.cos((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);
 }
currStep+=step;
}
function delay(){
Ydelay = YgetDelay+=(my-YgetDelay)*1/20;
Xdelay = XgetDelay+=(mx-XgetDelay)*1/20;
stars();
setTimeout(\'delay()\',10);
}
delay();
glow();
}
//-->
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/10760

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案