JavaScript鼠标特效-跟随鼠标旋转的流星

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>跟随鼠标旋转的流星</title>
</head>
<body bgcolor="#000000">
<script language="JavaScript">
<!--  
ns=(document.layers)?1:0;
Clrs=new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')
var amount=8
var step=0.3;
var currStep=0;
var Ypos=0;
var Xpos=0;
if (ns){
for (i=0; i < amount; i++)
document.write('<LAYER NAME="n'+i+'" LEFT=0 TOP=0 BGCOLOR=#FFFFFF CLIP="0,0,2,2"></LAYER>');
window.captureEvents(Event.MOUSEMOVE);  
function nMouse(evnt){
Ypos = evnt.pageY;
Xpos = evnt.pageX;
}
window.onMouseMove=nMouse;
}
else{
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i=0; i < amount; i++)
document.write('<div id="me" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#00aaff"></div>');
document.write('</div></div>');
function iMouse(){
Ypos=event.y+document.body.scrollTop;
Xpos=event.x+document.body.scrollLeft;
}
document.onmousemove = iMouse;
}

function Comet(){
for (i=0; i < amount; i++){
var randCol=Math.floor(Math.random()*Clrs.length);
var layer=(document.layers)?document.layers['n'+i]:me[i].style;
layer.top =Ypos+60*Math.sin((currStep + i*3.1)/4)*Math.cos(currStep/10);
layer.left=Xpos+60*Math.cos((currStep + i*3.1)/4);
if (ns) layer.bgColor=Clrs[randCol];else layer.background=Clrs[randCol];
}
currStep+=step;
setTimeout("Comet()",10);
}
window.onload=Comet;
</script>
</body>
</html>

​x
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>跟随鼠标旋转的流星</title>
</head>
<body bgcolor="#000000">
<script language="JavaScript">
<!--  
ns=(document.layers)?1:0;
Clrs=new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')
var amount=8
var step=0.3;
var currStep=0;
var Ypos=0;
var Xpos=0;

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...xxxxxxxxxx
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

JavaScript鼠标特效-跟随鼠标旋转的流星

分类

鼠标特效

描述

一个JS实现的鼠标特效，跟随鼠标旋转的流星，想对网页个性化定制的朋友，你可不要错过本款代码哦，我觉得是很不错的。本网页特效的背景一定要设置成黑色哦，否则看不到效果的。用JavaScript编写鼠标跟随特效的也可参考此代码。