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

含羞默默一张一合效果---田
首先展示“田”字效果


实现思想主要分为几部分
随机生成颜色值

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

参考：司徒正美《javascript获取随机颜色》

创建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);
                        });
                    });
                });



示例效果：

posted @ 2012-07-19 00:55  前端咖  阅读(2426)  评论(6)  编辑  收藏  举报