Shame and silence-tian

Shame and silence-tian
First, the effect of "Tian" is displayed.

The implementation idea is mainly divided into several parts
Random color value generation

            var getRandomColor = function(){                return  '#' +                    (function(color){                    return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])                        && (color.length == 6) ?  color : arguments.callee(color);                })('');            }

Reference: situ zhengmei JavaScript random color acquisition

Create a span tag and insert it into the div.
Crespan function, where N refers to the current number, MPID refers to the parent container Div, mleft refers to the left value of the current span, and MTop refers to the top value of the current span

            function creSpan(n,mpId,mleft,mtop){                var mSpan = document.createElement("span");                  var pId = mpId[0];                pId.appendChild(mSpan);                with(mSpan.style){                    left = mleft+"px";                    top = mtop+"px";                    background = getRandomColor();                }            }

Generate the word "Tian"
Create a two-dimensional array to save each crespan object.
Myleft = 100, MTop = 50 the default initial value is the distance from the left to the top.
Draw the word "Tian" and generate it in a dual loop.

                var myleft = 100;                var mytop = 50;                var arr = new Array();                var test =  $("#test");                for(var j=0;j<23;j++){                    arr[j] = new Array();                    if(j<3){                        for(var i=0;i<19;i++){                            myleft+=32;                            arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);                        }                    }                    else if(j>2&&j<10){                        for(var i=0;i<19;i++){                            myleft+=32;                            if(i<3){                                arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);                            }                            else if(i>7&&i<11){                                arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);                            }                            else if(i>15){                                arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);                            }                        }                    }                    else if(j>9&&j<13){                        for(var i=0;i<19;i++){                            myleft+=32;                            arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);                        }                    }                    else if(j>12&&j<20){                        for(var i=0;i<19;i++){                            myleft+=32;                            if(i<3){                                arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);                            }                            else if(i>7&&i<11){                                arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);                            }                            else if(i>15){                                arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);                            }                        }                    }                    else{                        for(var i=0;i<19;i++){                            myleft+=32;                            arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);                        }                    }                    mytop+=32;                    myleft=100;                }

 

When you move the mouse over each span, the tip is reduced and then opened slowly.
It mainly uses the animate function in jquery. Controls the values of width, height, left, and top.

                $.each($("#test span"),function(k,v){                    $(this).mouseover(function(){                        $(this).animate({                            width:"10px",                            height:"10px",                            left:"+="+parseInt(30-20)/2+"px",                            top:"+="+parseInt(30-20)/2+"px"                        },3000,function(){                            $(this).animate({                                width:"30px",                                height:"30px",                                left:"-="+parseInt(30-20)/2+"px",                                top:"-="+parseInt(30-20)/2+"px"                            },1000);                        });                    });                });

Example:

<! Doctype HTML> <br/> <pead> <br/> <title> A combination of shame and silence-tian </title> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <br/> <SCRIPT type =" text/JavaScript "src =" http://files.cnblogs.com/kuikui/jquery.js "> </SCRIPT> <br/> <style type =" text/CSS "> <br/> * {margin: 0px; padding: 0px ;}< br/># test {width: 800px; Height: 800px; margin: 30px auto 0px; overflow: hidden; position: REL Ative; Background-color: # f1f1f1 ;}< br/> # test span {display: block; position: absolute; width: 30px; Height: 30px ;} <br/> </style> <br/> </pead> <br/> <body> <br/> <Div id = "test"> </div> <br/> <SCRIPT type = "text/JavaScript"> <br/> var getrandomcolor = function () {<br/> return '#' + <br/> (function (color) {<br/> return (color + = '0123456789abcdef '[math. floor (math. random () * 16)]) <br/> & (color. leng Th = 6 )? Color: arguments. callee (color); <br/>}) (''); <br/>}< br/> function crespan (n, MPID, mleft, MTop) {<br/> var mspan = document. createelement ("span"); <br/> var pid = MPID [0]; <br/> PID. appendchild (mspan); <br/> with (mspan. style) {<br/> left = mleft + "PX"; <br/> Top = MTop + "PX"; <br/> background = getrandomcolor (); <br/>}< br/> </SCRIPT> <br/> <SCRIPT type = "text/JavaScript"> <br/> $ (function () {<br/> var myleft = 100; <br/> var mytop = 50; <br/> var arr = new array (); <br/> var test = $ ("# test"); <br/> for (var j = 0; j <23; j ++) {<br/> arr [J] = new array (); <br/> If (j <3) {<br/> for (VAR I = 0; I <19; I ++) {<br/> myleft + = 32; <br/> arr [J] [I] = new crespan (J + 1) * (I + 1), test, myleft, mytop); <br/>}< br/> else if (j> 2 & J <10) {<br/> for (VAR I = 0; I <19; I ++) {<br/> myleft + = 32; <br/> if (I <3) {<br/> arr [J] [I] = new crespan (J + 1) * (I + 1), test, myleft, mytop ); <br/>}< br/> else if (I> 7 & I <11) {<br/> arr [J] [I] = new crespan (J + 1) * (I + 1), test, myleft, mytop ); <br/>}< br/> else if (I> 15) {<br/> arr [J] [I] = new crespan (J + 1) * (I + 1), test, myleft, mytop ); <br/>}< br/> else if (j> 9 & J <13) {<br/> for (VAR I = 0; I <19; I ++) {<br/> myleft + = 32; <br/> arr [J] [I] = new crespan (J + 1) * (I + 1), test, myleft, mytop ); <br/>}< br/> else if (j> 12 & J <20) {<br/> for (VAR I = 0; I <19; I ++) {<br/> myleft + = 32; <br/> if (I <3) {<br/> arr [J] [I] = new crespan (J + 1) * (I + 1), test, myleft, mytop ); <br/>}< br/> else if (I> 7 & I <11) {<br/> arr [J] [I] = new crespan (J + 1) * (I + 1), test, myleft, mytop ); <br/>}< br/> else if (I> 15) {<br/> arr [J] [I] = new crespan (J + 1) * (I + 1), test, myleft, mytop ); <br/>}< br/> else {<br/> for (VAR I = 0; I <19; I ++) {<br/> myleft + = 32; <br/> arr [J] [I] = new crespan (J + 1) * (I + 1), test, myleft, mytop); <br/>}< br/> mytop + = 32; <br/> myleft = 100; <br/>}</P> <p> $. each ($ ("# test span"), function (K, v) {<br/> $ (this ). mouseover (function () {<br/> $ (this ). animate ({<br/> width: "10px", <br/> Height: "10px", <br/> left: "+ =" + parseint (30-20) /2 + "PX", <br/> top: "+ =" + parseint (30-20)/2 + "PX" <br/>}, 3000, function () {<br/> $ (this ). animate ({<br/> width: "30px", <br/> Height: "30px", <br/> left: "-=" + parseint (30-20) /2 + "PX", <br/> top: "-=" + parseint (30-20)/2 + "PX" <br/>}, 1000 ); <br/> }); <br/> </SCRIPT> <br/> </body> <br/> </ptml> <br/>

Run code