日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
含羞默默一張一合效果

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

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

首先展示“田”字效果

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

隨機生成顏色值

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

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

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

 
 
 
 
    
  
  
  
  
  1. function creSpan(n,mpId,mleft,mtop){  
    2. 
  
  
  
  
  2.     var mSpan = document.createElement("span");    
    3. 
  
  
  
  
  3.     var pId = mpId[0];  
    4. 
  
  
  
  
  4.     pId.appendChild(mSpan);  
    5. 
  
  
  
  
  5.     with(mSpan.style){  
    6. 
  
  
  
  
  6.         left = mleft+"px";  
    7. 
  
  
  
  
  7.         top = mtop+"px";  
    8. 
  
  
  
  
  8.         background = getRandomColor();  
    9. 
  
  
  
  
  9.     }  
    10. 
  
  
  
  
  10. } 
    11.

生成“田”字

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

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

 
 
 
 
    
  
  
  
  
  1. var myleft = 100;  
    2. 
  
  
  
  
  2. var mytop = 50;  
    3. 
  
  
  
  
  3. var arr = new Array();  
    4. 
  
  
  
  
  4. var test =  $("#test");  
    5. 
  
  
  
  
  5. for(var j=0;j<23;j++){  
    6. 
  
  
  
  
  6.     arr[j] = new Array();  
    7. 
  
  
  
  
  7.     if(j<3){  
    8. 
  
  
  
  
  8.         for(var i=0;i<19;i++){  
    9. 
  
  
  
  
  9.             myleft+=32;  
    10. 
  
  
  
  
  10.             arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
    11. 
  
  
  
  
  11.         }  
    12. 
  
  
  
  
  12.     }  
    13. 
  
  
  
  
  13.     else if(j>2&&j<10){  
    14. 
  
  
  
  
  14.         for(var i=0;i<19;i++){  
    15. 
  
  
  
  
  15.             myleft+=32;  
    16. 
  
  
  
  
  16.             if(i<3){  
    17. 
  
  
  
  
  17.                 arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
    18. 
  
  
  
  
  18.             }  
    19. 
  
  
  
  
  19.             else if(i>7&&i<11){  
    20. 
  
  
  
  
  20.                 arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
    21. 
  
  
  
  
  21.             }  
    22. 
  
  
  
  
  22.             else if(i>15){  
    23. 
  
  
  
  
  23.                 arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
    24. 
  
  
  
  
  24.             }  
    25. 
  
  
  
  
  25.         }  
    26. 
  
  
  
  
  26.     }  
    27. 
  
  
  
  
  27.     else if(j>9&&j<13){  
    28. 
  
  
  
  
  28.         for(var i=0;i<19;i++){  
    29. 
  
  
  
  
  29.             myleft+=32;  
    30. 
  
  
  
  
  30.             arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
    31. 
  
  
  
  
  31.         }  
    32. 
  
  
  
  
  32.     }  
    33. 
  
  
  
  
  33.     else if(j>12&&j<20){  
    34. 
  
  
  
  
  34.         for(var i=0;i<19;i++){  
    35. 
  
  
  
  
  35.             myleft+=32;  
    36. 
  
  
  
  
  36.             if(i<3){  
    37. 
  
  
  
  
  37.                 arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
    38. 
  
  
  
  
  38.             }  
    39. 
  
  
  
  
  39.             else if(i>7&&i<11){  
    40. 
  
  
  
  
  40.                 arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
    41. 
  
  
  
  
  41.             }  
    42. 
  
  
  
  
  42.             else if(i>15){  
    43. 
  
  
  
  
  43.                 arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
    44. 
  
  
  
  
  44.             }  
    45. 
  
  
  
  
  45.         }  
    46. 
  
  
  
  
  46.     }  
    47. 
  
  
  
  
  47.     else{  
    48. 
  
  
  
  
  48.         for(var i=0;i<19;i++){  
    49. 
  
  
  
  
  49.             myleft+=32;  
    50. 
  
  
  
  
  50.             arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
    51. 
  
  
  
  
  51.         }  
    52. 
  
  
  
  
  52.     }  
    53. 
  
  
  
  
  53.     mytop+=32;  
    54. 
  
  
  
  
  54.     myleft=100;  
    55. 
  
  
  
  
  55. } 
    56.

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

主要采用jquery中的animate函數(shù)。控制width，height，left，top的值。

 
 
 
 
    
  
  
  
  
  1. $.each($("#test span"),function(k,v){  
    2. 
  
  
  
  
  2.     $(this).mouseover(function(){  
    3. 
  
  
  
  
  3.         $(this).animate({  
    4. 
  
  
  
  
  4.             width:"10px",  
    5. 
  
  
  
  
  5.             height:"10px",  
    6. 
  
  
  
  
  6.             left:"+="+parseInt(30-20)/2+"px",  
    7. 
  
  
  
  
  7.             top:"+="+parseInt(30-20)/2+"px" 
    8. 
  
  
  
  
  8.         },3000,function(){  
    9. 
  
  
  
  
  9.             $(this).animate({  
    10. 
  
  
  
  
  10.                 width:"30px",  
    11. 
  
  
  
  
  11.                 height:"30px",  
    12. 
  
  
  
  
  12.                 left:"-="+parseInt(30-20)/2+"px",  
    13. 
  
  
  
  
  13.                 top:"-="+parseInt(30-20)/2+"px" 
    14. 
  
  
  
  
  14.             },1000);  
    15. 
  
  
  
  
  15.         });  
    16. 
  
  
  
  
  16.     });  
    17. 
  
  
  
  
  17. }); 
    18.

#p#

完整代碼：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.      
    4. 
  
  
  
  
  4.         含羞默默一張一合效果---田 
    5. 
  
  
  
  
  5.          
    6. 
  
  
  
  
  6.          
    7. 
  
  
  
  
  7.          
    8. 
  
  
  
  
  8.             *{margin:0px;padding:0px;}  
    9. 
  
  
  
  
  9.             #test{width:800px; height: 800px; margin: 30px auto 0px; overflow: hidden; position: relative; background-color: #F1F1F1;}  
    10. 
  
  
  
  
  10.             #test span{display: block; position: absolute; width: 30px; height: 30px; }  
    11. 
  
  
  
  
  11.          
    12. 
  
  
  
  
  12.      
    13. 
  
  
  
  
  13.      
    14. 
  
  
  
  
  14.         
 
  •          
  •          
  •      
  •  
  •      

    • 文章標題：含羞默默一張一合效果
    分享地址：http://www.5511xx.com/article/dpodojo.html