📄 23.html

📁 《CSS完全使用详解》源文件下载书籍源码

💻 HTML

字号:

<html>
<head>
<title>CSS Demo</title>
<script>
<!--
    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);

    // 每0.1秒循环一次
    mytimeout=setTimeout('movefilt()', 100);
}

function movePlanes()
{
    // 设置飞机位置的增量
    PlaneLight_X++;
    PlaneLight_Y++;

    // 如果飞机出了屏幕外区域则重置为0    
    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()">
<p>
<img src="radar.jpg" id="Body1" 
style="height:200;width:200;
filter:light()"> 
</p>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -