含羞默默一张一合效果

开发 前端
实现思想主要分为几部分:随机生成颜色值、生成“田”字。当鼠标移动到每个span上时尖尖缩小,然后慢慢张开。主要采用jquery中的animate函数。控制width,height,left,top的值。

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

首先展示“田”字效果

实现思想主要分为几部分

随机生成颜色值

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

创建span标签,插入div中。

creSpan函数,n指当前个数,mpid指父容器div,mleft指当前span的left的值,mtop指当前span的top值

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

生成“田”字

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

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

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

当鼠标移动到每个span上时尖尖缩小,然后慢慢张开。

主要采用jquery中的animate函数。控制width,height,left,top的值。

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

#p#

完整代码:

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <title>含羞默默一张一合效果---田</title> 
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  6.         <script type="text/javascript" src="http://files.cnblogs.com/kuikui/jquery.js"></script> 
  7.         <style type="text/css"> 
  8.             *{margin:0px;padding:0px;}  
  9.             #test{width:800px; height: 800px; margin: 30px auto 0px; overflow: hidden; position: relative; background-color: #F1F1F1;}  
  10.             #test span{display: block; position: absolute; width: 30px; height: 30px; }  
  11.         </style> 
  12.     </head> 
  13.     <body> 
  14.         <div id="test"></div> 
  15.         <script type="text/javascript"> 
  16.             var getRandomColor = function(){  
  17.                 return  '#' +  
  18.                     (function(color){  
  19.                     return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])  
  20.                         && (color.length == 6) ?  color : arguments.callee(color);  
  21.                 })('');  
  22.             }  
  23.             function creSpan(n,mpId,mleft,mtop){  
  24.                 var mSpan = document.createElement("span");    
  25.                 var pId = mpId[0];  
  26.                 pId.appendChild(mSpan);  
  27.                 with(mSpan.style){  
  28.                     left = mleft+"px";  
  29.                     top = mtop+"px";  
  30.                     background = getRandomColor();  
  31.                 }  
  32.             }  
  33.         </script> 
  34.         <script type="text/javascript"> 
  35.             $(function(){  
  36.                 var myleft = 100;  
  37.                 var mytop = 50;  
  38.                 var arr = new Array();  
  39.                 var test =  $("#test");  
  40.                 for(var j=0;j<23;j++){  
  41.                     arr[j] = new Array();  
  42.                     if(j<3){  
  43.                         for(var i=0;i<19;i++){  
  44.                             myleft+=32;  
  45.                             arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
  46.                         }  
  47.                     }  
  48.                     else if(j>2&&j<10){  
  49.                         for(var i=0;i<19;i++){  
  50.                             myleft+=32;  
  51.                             if(i<3){  
  52.                                 arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
  53.                             }  
  54.                             else if(i>7&&i<11){  
  55.                                 arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
  56.                             }  
  57.                             else if(i>15){  
  58.                                 arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
  59.                             }  
  60.                         }  
  61.                     }  
  62.                     else if(j>9&&j<13){  
  63.                         for(var i=0;i<19;i++){  
  64.                             myleft+=32;  
  65.                             arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
  66.                         }  
  67.                     }  
  68.                     else if(j>12&&j<20){  
  69.                         for(var i=0;i<19;i++){  
  70.                             myleft+=32;  
  71.                             if(i<3){  
  72.                                 arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
  73.                             }  
  74.                             else if(i>7&&i<11){  
  75.                                 arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
  76.                             }  
  77.                             else if(i>15){  
  78.                                 arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
  79.                             }  
  80.                         }  
  81.                     }  
  82.                     else{  
  83.                         for(var i=0;i<19;i++){  
  84.                             myleft+=32;  
  85.                             arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop);  
  86.                         }  
  87.                     }  
  88.                     mytop+=32;  
  89.                     myleft=100;  
  90.                 }  
  91.                   
  92.                 $.each($("#test span"),function(k,v){  
  93.                     $(this).mouseover(function(){  
  94.                         $(this).animate({  
  95.                             width:"10px",  
  96.                             height:"10px",  
  97.                             left:"+="+parseInt(30-20)/2+"px",  
  98.                             top:"+="+parseInt(30-20)/2+"px"  
  99.                         },3000,function(){  
  100.                             $(this).animate({  
  101.                                 width:"30px",  
  102.                                 height:"30px",  
  103.                                 left:"-="+parseInt(30-20)/2+"px",  
  104.                                 top:"-="+parseInt(30-20)/2+"px"  
  105.                             },1000);  
  106.                         });  
  107.                     });  
  108.                 });  
  109.             });  
  110.         </script> 
  111.     </body> 
  112. </html> 
  113.      

原文链接:http://www.cnblogs.com/kuikui/archive/2012/07/19/2598491.html

【编辑推荐】

  1. 发布一个JavaScript工具类库jutil
  2. 能说明你的JS技术很烂的五个原因
  3. 另一款有意思的JS图片放大镜
  4. JavaScript,只有你想不到
  5. JavaScript面试后的反思
责任编辑:张伟 来源: benpao的博客
相关推荐

2019-09-11 10:12:12

华为

2021-02-07 09:01:10

Java并发编程

2015-03-10 10:15:27

AppleWatch开发Swift

2020-06-15 08:54:46

架构图 EA业务建模

2019-07-16 12:54:37

IoT5G人工智能

2015-07-29 15:55:53

Windows 10桌面

2015-09-14 09:07:15

Java多线程

2013-07-04 10:50:33

腾讯移动互联网大数据

2015-07-17 07:47:51

京东618订

2018-05-18 18:09:44

人工智能

2023-09-05 08:53:51

2012-01-09 14:08:04

2013-12-16 10:59:52

WiFi上锁WiFi被盗

2020-09-12 16:45:49

Git

2018-02-13 14:56:24

戴尔

2015-06-24 10:51:10

iOS学习流程

2022-08-19 14:46:16

视觉框架

2021-09-29 11:30:01

大数据技术架构

2017-04-11 11:13:19

AndroidViewStateBackgr

2021-02-14 22:22:18

格式图片 HTTP
点赞
收藏

51CTO技术栈公众号