含羞默默一张一合效果

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

成都服务器托管，创新互联建站提供包括服务器租用、成都服务器托管、带宽租用、云主机、机柜租用、主机租用托管、CDN网站加速、国际域名空间等业务的一体化完整服务。电话咨询：028-86922220

首先展示“田”字效果

实现思想主要分为几部分

随机生成颜色值

 
 
 
 
    
  
  
  
  
  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.

创建span标签，插入div中。

creSpan函数，n指当前个数，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.

生成“田”字

创建一个二维数组保存每个creSpan的对象。myleft=100，mtop=50 默认初始值距左距顶的距离。

画“田”字，使用双重循环生成。

 
 
 
 
    
  
  
  
  
  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函数。控制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.         
 
  •          
  •             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();  
  •                 }  
  •             }  
  •          
  •          
  •             $(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);  
  •                         });  
  •                     });  
  •                 });  
  •             });  
  •          
  •      
  •  
  •      

    • 当前题目：含羞默默一张一合效果
    本文来源：http://www.csdahua.cn/qtweb/news47/541047.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    定制开发知识

    行业网站建设

    做移动网站　　 　柔性防护网　　 　高端网站设计推广　　 　梓潼网站制作公司　　 　高端网站定制　　 　云主机　　 　中建建业环保　　 　注册域名　　 　成都外贸网站优化　　 　成都网站排名　　 　企业网站设计　　 　腾讯免备案主机　　 　400电话办理　　 　手机网站开发　　 　电信成都枢纽中心　　 　成都网络推广　　 　四川雅安服务器托管　　 　成都响应式网站建设　　 　香港云服务器　　 　香港虚拟主机