41、跟随鼠标的彩色闪烁文字

41、跟随鼠标的彩色闪烁文字

要完成此效果需要三个步骤

 

第一步:把如下代码加入到<head>区域中

 

<STYLE>.spanstyle {

    COLOR: #0066ff; FONT-FAMILY: 隶书; FONT-SIZE: 14pt; FONT-WEIGHT: normal; POSITION: absolute; TOP: -50px; VISIBILITY: visible

}

</STYLE>

 

 

第二步:把如下代码加入到<body>区域中

<SCRIPT language=javascript>

    var message=" !";

    var x,y;

    var step=12;

    var flag=0;

 

    message=message.split("");

    var xpos=new Array();

    for (i=0;i<=message.length-1;i++) {

        xpos[i]=-50;

    }

 

    var ypos=new Array();

    for (i=0;i<=message.length-1;i++) {

        ypos[i]=-50;

    }

 

    function handlerMM(e) {

        x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX+10;

        y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;

        flag=1;

    }

 

    function makesnake() {

        if (flag==1 && document.all) {

                for (i=message.length-1; i>=1; i--) {

                   xpos[i]=xpos[i-1]+step;

                ypos[i]=ypos[i-1];

                }

            xpos[0]=x+step;

            ypos[0]=y;

 

            for (i=0; i<=message.length-1; i++) {

                    var thisspan = eval("span"+(i)+".style");

                    thisspan.posLeft=xpos[i];

                thisspan.posTop=ypos[i];

                thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;

                }

        }

        else if (flag==1 && document.layers) {

                for (i=message.length-1; i>=1; i--) {

                   xpos[i]=xpos[i-1]+step;

                ypos[i]=ypos[i-1];

                }

            xpos[0]=x+step;

            ypos[0]=y;

 

            for (i=0; i<message.length-1; i++) {

                    var thisspan = eval("document.span"+i);

                    thisspan.left=xpos[i];

                thisspan.top=ypos[i];

                thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;

            }

        }

    }

</SCRIPT>

 

<SCRIPT language=javascript>

    for (i=0;i<=message.length-1;i++) {

            document.write("<span id='span"+i+"' class='spanstyle'>");

        document.write(message[i]);

            document.write("</span>");

    }

 

    if (document.layers) {

        document.captureEvents(Event.MOUSEMOVE);

    }

    document.onmousemove = handlerMM;

</SCRIPT>

 

<SCRIPT language=javascript>

    function pageonload() {

        makesnake();

        window.setTimeout("pageonload();", 2);

    }

</SCRIPT>

 

 

第三步:把“onload=javascript:pageonload()”加在<body>标记里

例如:<body onload=javascript:pageonload()>

 

 

Write a comment

Comments: 0