• JS实现黑客帝国字母下落效果


    在一个JS的学习资料上,看到一个关于黑客帝国文字下落的特效!挺好玩的,贴个源码分享一下!

    <HTML>

    <HEAD>

        <TITLE>《黑客帝国》中的字符下落效果</TITLE>

        <meta http-equiv="Content-Type" content="text/html;charset=gb2312">

    </HEAD>

    <style type="text/css">

    body

    {

        overflow:hidden;

        margin:0;

        background-color:#000000;

        font-family:宋体;

    }

    DIV.#heike

    {

        overflow:hidden;

        position:relative;

        top:5%;

        90%;

        height:90%;

        border-style:solid;

        border-1;

        border-color:#009900;

    }

    </style>

    <script language="javascript">

    var strCount;

    var str;

    var Color;

    var Font;

    var sLine = "0<br/>1<br/>0<br/>1<br/>0<br/>0<br/>1<br/>0<br/>1<br/>0<br/>";

    function OnLoad()

    {

        strCount = 40;

        str = [];

        Color = [];

        Font = [];

        Color[0] = "#002211";                                       //文字的颜色

        Color[1] = "#003311";

        Color[2] = "#005511";

        Color[3] = "#008811";

        Color[4] = "#00BB99";

        Color[5] = "#114411";

        Color[6] = "#335566";

        Color[7] = "#668899";

        Color[8] = "#99BBAA";

        Color[9] = "#CECECC";

        Font[0] = "10px";                                            //文字的大小

        Font[1] = "12px";  

        Font[2] = "14px";

        Font[3] = "16px";

        Font[4] = "18px";

        setTimeout("strik()",50); }

    function strik()

    {

        for(var i=0;i<strCount;i++)

        {

            if(typeof(str[i]) != "undefined")                    //如果字符串存在

            {

                if(str[i]["Carch"].style.pixelTop > heike.clientHeight)

                {

                    str[i]["Carch"].outerHTML = "";

                    delete str[i]["Level"];                     //删除数组元素

                    delete str[i]["Speed"];

                    delete str[i]["Carch"];

                    delete str[i];

                }

                else

                {

                    str[i]["Carch"].style.pixelTop += str[i]["Speed"];

                }

            }

            else if(Math.random()<0.25)                              //随机小数

            {

                str[i] = new Array();

                str[i]["Level"] = Math.round(Math.random()*4);

                str[i]["Speed"] = (Math.round(Math.random()*str[i]["Level"]) <<2)+50;

                document.all["heike"].insertAdjacentHTML("AfterBegin","<span id='SPAN_"+i+"'>"+sLine+"</span>");

                str[i]["Carch"] = document.all["SPAN_"+i];

                str[i]["Carch"].style.fontSize = Font[str[i]["Level"]];                                                                         //字体

                str[i]["Carch"].style.position = "absolute";        //位置

                str[i]["Carch"].style.pixelLeft = Math.round(Math.random() *heike.clientWidth);                                                  //x坐标

                str[i]["Carch"].style.pixelTop = -str[i]["Carch"].offsetHeight;                                                                 //y坐标

                str[i]["Carch"].style.color = Color[str[i]["Level"]+5];                                                                         //颜色

                str[i]["Carch"].style.filter = "glow(Color="+Color[str[i] ["Level"]]+",Strength=5)";                                            //滤镜效果

                str[i]["Carch"].style.zIndex = str[i]["Level"];     //z-Index

            }

        }

        setTimeout("strik()",50);

    }

    </script>

    <BODY onload="OnLoad()">

    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

    <tr><td align="center" height="100%"><div id="heike"></div></td></tr>

    <tr><td align="center" style="padding:5;font-size:9pt;color:#FFFFFF;">使用 IE 6.0 以上版本或以IE 为核心的浏览器浏览本页,1024*768分辨率为佳</td></tr>

    </table> 

     </BODY>

    </HTML>

    提示:重点是对颜色和速度的随机设置。JavaScript中的“Math”对象用来提供数学运算,其中“Math.random”用来获取一个0到1之间的随机数。“Math.round”是采用四舍五入方式取得最接近的整数。代码中使用了两维数组,“delete”方法用来删除数组中的元素。
    ( 你可以自己去修改参数看看对应的效果,如:JS中关于文字下降速度控制的变量Speed,可以将其调的大一些,让它更快些;还可以修改CSS样式里溢出属性“overflow”取消隐藏,看看有多难看!。。。。。)

  • 相关阅读:
    有return的情况下try catch finally的执行顺序
    java面试题
    JSTL常用标签
    文件引入路径设置
    JavaScript配合button.onclick()使用总结
    Java NIO vs IO
    如何在Oracle官网下载历史版本JDK
    常量池之String.intern()方法
    MyeclipseJRE版本设置
    JVM常用参数配置
  • 原文地址:https://www.cnblogs.com/SanMaoSpace/p/2358285.html
Copyright © 2020-2023  润新知