本篇內(nèi)容主要講解“怎么用javascript含羞默默一張一合效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用javascript含羞默默一張一合效果”吧!

創(chuàng)新互聯(lián)建站主要從事做網(wǎng)站、網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)祿勸,10多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

首先展示“田”字效果

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

隨機(jī)生成顏色值

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

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

creSpan函數(shù)，n指當(dāng)前個數(shù)，mpid指父容器div，mleft指當(dāng)前span的left的值，mtop指當(dāng)前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 默認(rèn)初始值距左距頂?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;  }

當(dāng)鼠標(biāo)移動到每個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);          });      });  });

完整代碼：

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