自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

含羞默默一張一合效果

作者：benpao
開發(fā) 前端
實(shí)現(xiàn)思想主要分為幾部分：隨機(jī)生成顏色值、生成“田”字。當(dāng)鼠標(biāo)移動(dòng)到每個(gè)span上時(shí)尖尖縮小，然后慢慢張開。主要采用jquery中的animate函數(shù)?？刂苭idth，height，left，top的值。

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

首先展示“田”字效果

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

隨機(jī)生成顏色值

  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.     })('');  
  7. } 

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

creSpan函數(shù)，n指當(dāng)前個(gè)數(shù)，mpid指父容器div，mleft指當(dāng)前span的left的值，mtop指當(dāng)前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.     }  
  10. } 

生成“田”字

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

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

  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;  
  55. } 

當(dāng)鼠標(biāo)移動(dòng)到每個(gè)span上時(shí)尖尖縮小，然后慢慢張開。

主要采用jquery中的animate函數(shù)?？刂苭idth，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. 發(fā)布一個(gè)JavaScript工具類庫jutil
  2. 能說明你的JS技術(shù)很爛的五個(gè)原因
  3. 另一款有意思的JS圖片放大鏡
  4. JavaScript，只有你想不到
  5. JavaScript面試后的反思
責(zé)任編輯：張偉 來源： benpao的博客
JavaScript
相關(guān)推薦

2019-09-11 10:12:12

華為

2021-02-07 09:01:10

Java并發(fā)編程

2015-03-10 10:15:27

AppleWatch開發(fā)Swift

2020-06-15 08:54:46

架構(gòu)圖 EA業(yè)務(wù)建模

2019-07-16 12:54:37

IoT5G人工智能

2015-09-14 09:07:15

Java多線程

2015-07-29 15:55:53

Windows 10桌面

2013-07-04 10:50:33

騰訊移動(dòng)互聯(lián)網(wǎng)大數(shù)據(jù)

2012-01-09 14:08:04

2018-05-18 18:09:44

人工智能

2024-05-07 08:49:45

微服務(wù)架構(gòu)模式

2013-12-16 10:59:52

WiFi上鎖WiFi被盜

2023-09-05 08:53:51

2015-07-17 07:47:51

京東618訂

2018-02-13 14:56:24

戴爾

2022-08-19 14:46:16

視覺框架

2015-06-24 10:51:10

iOS學(xué)習(xí)流程

2020-09-12 16:45:49

Git

2025-03-11 10:58:00

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)