含羞默默一張一合效果

作者：benpao 2012-07-19 09:25:01

實現思想主要分為幾部分：隨機生成顏色值、生成“田”字。當鼠標移動到每個span上時尖尖縮小，然后慢慢張開。主要采用jquery中的animate函數。控制width，height，left，top的值。

含羞默默一張一合效果---田

首先展示“田”字效果

實現思想主要分為幾部分

隨機生成顏色值

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

創建span標簽，插入div中。

creSpan函數，n指當前個數，mpid指父容器div，mleft指當前span的left的值，mtop指當前span的top值

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();  
    }  
}

生成“田”字

創建一個二維數組保存每個creSpan的對象。myleft=100，mtop=50 默認初始值距左距頂的距離。

畫“田”字，使用雙重循環生成。

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;  
}

當鼠標移動到每個span上時尖尖縮小，然后慢慢張開。

主要采用jquery中的animate函數。控制width，height，left，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);  
        });  
    });  
});

#p#

完整代碼：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>含羞默默一張一合效果---田</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <script type="text/javascript" src="http://files.cnblogs.com/kuikui/jquery.js"></script> 
        <style type="text/css"> 
            *{margin:0px;padding:0px;}  
            #test{width:800px; height: 800px; margin: 30px auto 0px; overflow: hidden; position: relative; background-color: #F1F1F1;}  
            #test span{display: block; position: absolute; width: 30px; height: 30px; }  
        </style> 
    </head> 
    <body> 
        <div id="test"></div> 
        <script type="text/javascript"> 
            var getRandomColor = function(){  
                return  '#' +  
                    (function(color){  
                    return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])  
                        && (color.length == 6) ?  color : arguments.callee(color);  
                })('');  
            }  
            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();  
                }  
            }  
        </script> 
        <script type="text/javascript"> 
            $(function(){  
                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;  
                }  
                  
                $.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);  
                        });  
                    });  
                });  
            });  
        </script> 
    </body> 
</html>

原文鏈接：http://www.cnblogs.com/kuikui/archive/2012/07/19/2598491.html

【編輯推薦】

發布一個JavaScript工具類庫jutil
能說明你的JS技術很爛的五個原因
另一款有意思的JS圖片放大鏡
JavaScript，只有你想不到
JavaScript面試后的反思

責任編輯：張偉來源： benpao的博客

JavaScript