最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

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

成都服務(wù)器托管，創(chuàng)新互聯(lián)建站提供包括服務(wù)器租用、成都服務(wù)器托管、帶寬租用、云主機、機柜租用、主機租用托管、CDN網(wǎng)站加速、國際域名空間等業(yè)務(wù)的一體化完整服務(wù)。電話咨詢：028-86922220

首先展示“田”字效果

實現(xiàn)思想主要分為幾部分

隨機生成顏色值

 
 
 
 

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

創(chuàng)建span標簽，插入div中。

creSpan函數(shù)，n指當前個數(shù)，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();  
  
  
  
  
    }  
  
  
  
  
} 
 
 
 
 

生成“田”字

創(chuàng)建一個二維數(shù)組保存每個creSpan的對象。myleft=100，mtop=50 默認初始值距左距頂?shù)木嚯x。

畫“田”字，使用雙重循環(huán)生成。

 
 
 
 

  
  
  
  
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函數(shù)?？刂苭idth，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#

完整代碼：

 
 
 
 

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