网页JS动画代码-由近到远变化

小提示

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>
<script language="JavaScript">
if (document.all){
xL=5; 
xH=0;
xW=0;
xR=0;
xE=0;
xMY=0;
xMX=0;
xWd=0;
xHd=0;
xF=new Array();
xY=new Array();
xX=new Array();
xS=new Array();
xA=new Array();
xB=new Array();
ini=new Array();
cl=new Array('#fff000','#0000FF','#ff0000','#00ff00','#ff00ff','#ffa500')
document.write('<div id="xouter" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < xL; i++){
document.write('<div id="xie" style="position:absolute;top:0;left:0;width:10px;height:10px;'
+'font-family:Courier New;font-size:50px;color:#ffffff">.</div>');
}
document.write('</div></div>');
//Initial Placement!
function Set(){
for (i=0; i < xL; i++){
xH=window.document.body.offsetHeight;
xW=window.document.body.offsetWidth;
xA[i]=Math.round(Math.random()*xH);
xB[i]=Math.round(Math.random()*xW);
xS[i]=Math.random()*0.07+0.05;
xR=Math.round(Math.random()*3);
xE=Math.round(Math.random()*2500+50)
if (xR == 3) xB[i]=-xE;
if (xR == 2) xB[i]=xW+xE;
if (xR == 1) xA[i]=-xE;
if (xR == 0) xA[i]=xH;
xF[i]=xW/14;
}
}
Set();
function Assign(){
xouter.style.top=document.body.scrollTop;
for (i=0; i < xL; i++){
xF[i]-=xS[i]*25;
if (xF[i] < 4) xF[i]=3;
xie[i].style.top =xY[i];
xie[i].style.left=xX[i];
xie[i].style.fontSize=xF[i];
xie[i].style.filter='glow(color='+ini[i]+', strength='+xF[i]/3+')';
}
}
function fly(){
var N=Math.floor(Math.random()*cl.length)
xMY=window.document.body.clientHeight/2;
xMX=window.document.body.clientWidth/2;
xWd=Math.round(Math.random()*40+5);
xHd=Math.round(Math.random()*30+5);
for (i=0; i < xL; i++)
{
xY[i]=xA[i]+=(xMY-xA[i])*(xS[i]);              
xX[i]=xB[i]+=(xMX-xB[i])*(xS[i]);  
if ((xX[i] > xMX-xWd) && (xX[i] < xMX+xWd) && (xY[i] > xMY-xHd) && (xY[i] < xMY+xHd)){
 xH=window.document.body.offsetHeight;
 xW=window.document.body.offsetWidth;
 xA[i]=Math.round(Math.random()*xH);
 xB[i]=Math.round(Math.random()*xW);
 xS[i]=Math.random()*0.05+0.05;
 xR=Math.round(Math.random()*3);
 xE=Math.round(Math.random()*50+50)
 if (xR == 3) xB[i]=-xE;
 if (xR == 2) xB[i]=xW+xE;
 if (xR == 1) xA[i]=-xE;
 if (xR == 0) xA[i]=xH+xE;
}
if ((xX[i] < 0) || (xX[i] > xW) || (xY[i] < 0) || (xY[i] > xH)) 
 {
 xF[i]=xW/14;
 ini[i]=cl[N];
 }
}
Assign();
setTimeout('fly()',10);
}
fly();
}
// -->
</script>
</body>
</html>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

网页JS动画代码-由近到远变化

分类

网站常用

描述

与朋友们分享一款基于JS的网页动画特效代码，由此JS动画可学习到不少的JavaScript知识技巧，打开本效果后，可看到网页上有许多蓝色的飞舞的图案效果，好似是由近到远的变化效果，学会了JS，做起网页特效真轻松。