含羞默默一張一合效果
作者：benpao
實現思想主要分為幾部分：隨機生成顏色值、生成“田”字。當鼠標移動到每個span上時尖尖縮小，然后慢慢張開。主要采用jquery中的animate函數。控制width，height，left，top的值。
含羞默默一張一合效果---田
首先展示“田”字效果
實現思想主要分為幾部分
隨機生成顏色值
- var getRandomColor = function(){
- return '#' +
- (function(color){
- return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
- && (color.length == 6) ? color : arguments.callee(color);
- })('');
- }
創建span標簽，插入div中。
creSpan函數，n指當前個數，mpid指父容器div，mleft指當前span的left的值，mtop指當前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();
- }
- }
生成“田”字
創建一個二維數組保存每個creSpan的對象。myleft=100，mtop=50 默認初始值距左距頂的距離。
畫“田”字，使用雙重循環生成。
- 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;
- }
當鼠標移動到每個span上時尖尖縮小，然后慢慢張開。
主要采用jquery中的animate函數。控制width，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);
- });
- });
- });
#p#
完整代碼：
- <!DOCTYPE html>
- <html>
- <head>
- <title>含羞默默一張一合效果---田</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <script type="text/javascript" src="http://files.cnblogs.com/kuikui/jquery.js"></script>
- <style type="text/css">
- *{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; }
- </style>
- </head>
- <body>
- <div id="test"></div>
- <script type="text/javascript">
- 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();
- }
- }
- </script>
- <script type="text/javascript">
- $(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);
- });
- });
- });
- });
- </script>
- </body>
- </html>
原文鏈接：http://www.cnblogs.com/kuikui/archive/2012/07/19/2598491.html
【編輯推薦】
責任編輯：張偉
來源：
benpao的博客
