栏目导航
热门教程
相关教程
跟随鼠标的彩色闪烁文字特效代码 [收藏本页]
  • 作者：佚名 来源：本站整理 发布时间：2006-7-8 8:20:16

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

    第一步：把如下代码加入到<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()>


  • [] [返回上一页] [打 印] [收 藏]
  • 上一篇教程：跟随鼠标的旋转文字代码 下一篇教程：由鼠标按住可移文字特效代码
Copyright © 2003-2008 站长助手 www.web162.com
辽ICP备05001760号 网络实名:站长助手 转载本站原创教程请注名来源于本站
力倡站长资源文化,崇尚互联共享,做中国最好站长网站,为中国网站提供动力！
始建于2003-3-1 8:10 中国首都·北京 辽宁(分站)
主资源渠道辽宁电信分公司服务器组及带宽！