Shame and silence-tian

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.