当前位置: 代码迷 >> JavaScript >> 【散分】Javascript 新年快乐(2),喜迎2010解决思路
  详细解决方案

【散分】Javascript 新年快乐(2),喜迎2010解决思路

热度:781   发布时间:2012-02-04 15:43:09.0
【散分】Javascript 新年快乐(2),喜迎2010
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>新年快乐--wujinjian</title>
    <meta http-equiv=Content-Type content="text/html;charset=gb2312">
    <script type="text/javascript">
        var fontarr=new Array();
        var sd=1;
        var js=1;
        var time=null;
        
        //"新年快乐" 四个字所占的位置
        var fontPosition1=new Array(
        "62-52","26-67","42-67","57-67","72-67","87-67","102-67","42-91","85-92","20-111","36-111","52-111","66-111","80-111","96-111","111-111","34-144","49-144","62-144",
        "77-144","93-144","63-127","63-161","64-176","64-192","63-207","35-214","49-213","37-172","30-185","86-172","96-187","125-62","141-61","156-59","170-57","186-56",
        "126-79","126-94","126-110","126-125","125-142","125-158","124-174","120-190","112-206","100-219","141-118","156-118","172-118","187-118","201-118","172-135",
        "171-150","171-165","171-183","171-198","171-214","253-48","248-64","239-80","228-95","217-111","263-69","277-68","292-68","307-68","323-68","337-68","352-68",
        "368-68","383-68","313-84","313-101","313-133","313-149","313-195","313-211","246-117","246-134","245-151","215-169","231-169","246-169","261-169","276-169","289-169",
        "305-169","321-169","336-169","351-169","366-168","381-168","395-167","260-115","275-115","291-115","305-115","320-115","337-115","350-115","365-115","379-115",
        "313-182","433-47","433-63","432-80","432-98","432-111","432-130","432-144","432-160","432-178","432-194","432-210","411-89","409-106","404-123","446-89","456-104",
        "473-81","488-81","504-81","518-81","533-81","547-81","557-99","557-119","459-139","476-140","491-140","509-140","524-140","539-140","556-140","570-140","510-50","511-66",
        "511-99","510-119","504-157","519-156","497-172","489-189","475-202","458-217","526-172","539-189","555-204","570-220","624-62","640-63","654-62","670-61","686-60","701-58",
        "716-57","731-56","746-56","623-79","620-95","616-111","614-128","628-128","644-128","660-128","674-128","689-128","705-128","720-128","734-128","749-128","764-128",
        "689-97","689-112","687-145","687-162","687-177","686-193","684-210","668-215","651-216","639-163","627-179","615-192","599-208","728-160","741-174","755-189","769-206");
        
        function create()
        {
            for(var i=0;i<190;i++)
            {
                fontarr[i]=document.createElement("div");
                fontarr[i].style.position="absolute";
                if(i>=0 && i<=45)
                {
                    fontarr[i].style.left="0px";
                    fontarr[i].style.top="0px";
                }
                if(i>=46 && i<=90)
                {
                    fontarr[i].style.left="0px";
                    fontarr[i].style.top="270px";
                }
                if(i>=91 && i<=135)
                {
                    fontarr[i].style.left="780px";
                    fontarr[i].style.top="0px";
                }
                if(i>=136 && i<=189)
                {
                    fontarr[i].style.left="780px";
                    fontarr[i].style.top="270px";
                }
                
                fontarr[i].style.width="22px";
                fontarr[i].style.height="22px";
                fontarr[i].style.overflow="hidden";
                
                //if(navigator.userAgent.toLowerCase().indexOf("ie")!=-1)
                //    fontarr[i].style.fontSize="20pt";
                //else
                    fontarr[i].style.fontSize="11pt";
                
                fontarr[i].style.color="rgb(255,"+i+","+i+")"
                    
                fontarr[i].appendChild(document.createTextNode("●"));
                
                document.getElementById("main_div").appendChild(fontarr[i]);
            }
            
            start();
        }
        
        function start()
        {
            time=setTimeout("start()",50);
            
            for(var i=0;i<190;i++)
            {
                var xy=fontPosition1[i].split("-");
                var x=xy[0]-0;
                var y=xy[1]-0;
                
                var divleft=fontarr[i].style.left.replace("px","")-0;
                var divtop=fontarr[i].style.top.replace("px","")-0;
                
                if(divleft > x)
                    objMove(fontarr[i],-sd,0);
                else
                //if(divleft < x)  //不让 ● 抖动的话请用if,注释掉else
                    objMove(fontarr[i],sd,0);
                
                if(divtop > y)
                    objMove(fontarr[i],0,-sd);
                else
                //if(divtop < y)  //不让 ● 抖动的话请用if,注释掉else
                    objMove(fontarr[i],0,sd);
            }
            
            if(js<550)
                js++;
            if(js==550)
            {
                clearTimeout(time);
                js=0;
                end(); 
            }
        }
        
        function end()
        {
            time=setTimeout("end()",50);
            
            for(var i=0;i<190;i++)
            {
                var divleft=fontarr[i].style.left.replace("px","")-0;
                var divtop=fontarr[i].style.top.replace("px","")-0;
                
                if(i>=0 && i<=45)
                {
                    if(divleft > 0)
                        objMove(fontarr[i],-sd,0)
                    if(divtop > 0)
                        objMove(fontarr[i],0,-sd)
                }
                if(i>=46 && i<=90)
                {
                    if(divleft > 0)
                        objMove(fontarr[i],-sd,0)
                    if(divtop < 270)
                        objMove(fontarr[i],0,sd)
                }
                if(i>=91 && i<=135)
                {
                    if(divleft < 780)
                        objMove(fontarr[i],sd,0)
                    if(divtop > 0)
                        objMove(fontarr[i],0,-sd)
                }
                if(i>=136 && i<=189)
                {
                    if(divleft < 780)
                        objMove(fontarr[i],sd,0)
                    if(divtop < 270)
                        objMove(fontarr[i],0,sd)
                }
            }
            
            if(js<550)
                js++;
            if(js==550)
            {
                clearTimeout(time);
                js=0;
                start();
            }
        }

        function objMove(divobj,_x,_y)
        {
            divobj.style.left=divobj.style.left.replace("px","")-0+_x+"px";
            divobj.style.top=divobj.style.top.replace("px","")-0+_y+"px";
        }
        
        function load()
        {
            document.getElementById("main_div").style.left=(document.body.clientWidth-800)/2+"px";
        }
    </script>
</head>
<body onload="load(),create()" onresize="load()" style="background-color:black;">
    <form id="form1">
        <div id="main_div" style="position:absolute;left:0px;top:100px;width:800px;height:300px;border:white solid 1px">
        </div>
    </form>
</body>
</html>