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>
<TITLE>雷达扫描效果</TITLE>
<SCRIPT language="JavaScript">
var Light_X = 20
var Light_Y = 20
var Light_Z = 40
var xInc = 10;
var yInc = 10;
var r = 100;
var deg = 0;
var deg1;
var rad;
var PointAngle;	
var PlaneLight_X = 20
var PlaneLight_Y = 120
var PlaneLight_Z = 3
var conversion = (2 * 3.1415917)/360
function movefilt()
{
Light_X = r + r * Math.cos(deg * conversion);
Light_Y = r + r * Math.sin(deg * conversion);	
deg += 10;
if (deg == 360) 
 deg = 0;
// 旋转扫描区域
Body1.filters[0].moveLight(0, Light_X, Light_Y, Light_Z, 1);
// 计算飞机位置
PointAngle = Math.atan((PlaneLight_Y - r)/(PlaneLight_X - r))/conversion;
if ((PlaneLight_X < r) && (PlaneLight_Y < r))
  PointAngle += 180;
if ((PlaneLight_X > r) && (PlaneLight_Y < r))
  PointAngle += 360 
if ((PlaneLight_X < r) && (PlaneLight_Y > r))
  PointAngle += 180
// 当飞机在扫描区内时,显示器位置	
if ((deg - 10 <= PointAngle) && (PointAngle <= deg))
  Body1.filters[0].moveLight(2, PlaneLight_X, PlaneLight_Y, PlaneLight_Z, 1);
mytimeout=setTimeout('movefilt()', 100);
}
function movePlanes()
{
// 改变飞机的位置
PlaneLight_X++;
PlaneLight_Y++;
// 当飞机飞出屏幕时从头开始	
if (PlaneLight_Y > 200) PlaneLight_Y = 0;
if (PlaneLight_X > 200) PlaneLight_X = 0;
timeout2 = setTimeout('movePlanes()', 500);
}
function go() {
Body1.filters.light.addCone(100,100,0,Light_X, Light_Y, 0, 255, 0, 150, 10);
Body1.filters.light.addAmbient(0,255,0,20)
Body1.filters.light.addPoint(PlaneLight_X, PlaneLight_Y, 3, 0, 255, 0, 100);
var x = 0;
movefilt();
movePlanes();
}
</SCRIPT>
</HEAD>

<BODY onload=go()>
<center>
<img src="//ku.shouce.ren/files/images/201601/56a36b8156224.jpg" id='Body1' style="height:200;width:200;filter:light()"><br>
<font class=30pt>
<br>雷达扫描效果：<br>屏幕上有一个小亮点<br>慢慢地移动，那就是飞机了......
</font>
</center>
</BODY>
</HTML>

​x
 
<HTML>
<HEAD>
<TITLE>雷达扫描效果</TITLE>
<SCRIPT language="JavaScript">
var Light_X = 20
var Light_Y = 20
var Light_Z = 40
var xInc = 10;
var yInc = 10;
var r = 100;
var deg = 0;
var deg1;
var rad;
var PointAngle; 
var PlaneLight_X = 20

CSS代码

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

放大

CSS代码...xxxxxxxxxx
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

Js雷达扫描效果

分类

网站常用

描述

Js雷达搜索特效，雷达扫描中，看到屏幕上有一个小亮点，慢慢地移动，莫非那就是飞机了。雷达底图是一张图片，用JS生成了扫描效果，二者配合，相当完美了。JavaScript实现雷达特效似乎比较简单，呵呵。