您的位置：首页 > 其它

关于方块在九宫格的移动效果

2015-10-16 10:45 218 查看
首先，先看效果图，点击小图，放大，大图变小。



然后想一下，叉，这么难的效果，可以实现么

1 接着，言归正传，如何实现呢，先看图，和九宫格很像吧。我的实现思路，先布局

<div class="wrap">
		<div class="big" data-row="0" data-col="0">1</div>
		<div data-row="0" data-col="2">2</div>
		<div data-row="1" data-col="2">3</div>
		<div data-row="2" data-col="0">4</div>
		<div data-row="2" data-col="1">5</div>
		<div data-row="2" data-col="2">6</div>
	</div>
2 然后写样式，用什么定位好，FLOAT就好布局，易维护，但实现功能，一定要绝对定位，所以先用FLOAT定位

如下：

*{
	padding: 0;
	margin: 0;
}
.wrap{
	width: 400px;
	height: 400px;

}
.wrap div{
	float: left;
	margin-bottom: 8px;
	margin-right: 8px;
	width: 125px;
	height: 125px;
	background: green;
}
.wrap .big{width: 258px;
height: 258px;
background: blue;}
3 写JS，先把定位转换成绝对的。

var pos =[]; //用来存放原来的位置，布局由FLOAT转为POSITION
    	var $divs = $('.wrap div');
    	var len = $divs.length;
    	for(var i=0;i<len;i++){
    		var $div = $divs.eq(i);
            pos.push([$div.position().left,$div.position().top]);
        }
    	$('.wrap div').each(function(i,item){
    		$(item).css({
    			left:pos[i][0],
                top:pos[i][1],
                position : 'absolute',
                margin : '0px'
    		});
    	})
4 接着写思路，这个效果很容易联想到九宫格 ，那生成一个九宫格的数组

for(var i =0; i<3;i++){
    		for(var j =0; j<3;j++){
    			arr.push([i,j]);
    		}
    	}
     结果就是[[0,0],[0,1],[0,2],...]


有什么用呢，代表它的位置



5 图中有六个DIV，那我就给它一个定位信息 data-row, data-col 表示它的位置，因为第一个就四个格，所以如下面表示

<div class="big" data-row="0" data-col="0">1</div>
<div data-row="0" data-col="2">2</div>
<div data-row="1" data-col="2">3</div>
<div data-row="2" data-col="0">4</div>
<div data-row="2" data-col="1">5</div>
<div data-row="2" data-col="2">6</div>
6 点击小图，放大，所以可以理解成，宽高和位置改变了。位置怎样改变呢，



可以看成，是看成是九宫格里，旁边的最早出现的格子的定位，如我就击的 2，2 那它相邻的格子有，[1，1]，[1，2]，[2，1]和自己[2，2]

用JS就可以理解成

Math.abs(arr[i][0] - x) <=1 && Math.abs(arr[i][1] - y) <=1

************************************接着说原理*****************************************

从九宫格中，抽出六个项，表示放大的位置，和另外五个，不在放大区域的五个位置

我用两个数组，一个存放放大的方块的位置，虽然只一个项，

另外一个数组，是有五项，存放其他五个小格的位置。 那如果相邻的不仅四个，怎么办，我用了一个LEN，只取四个，所以变成

if(Math.abs(arr[i][0] - x) <=1 && Math.abs(arr[i][1] - y) <=1 && len<4){
	    			if(!lock){
		    				arr1 =[arr[i][0],arr[i][1]];
		    				lock = true;
	    				}
	    				len ++;
	    			}else{
	    				arr2.push(arr[i]);
	    			}
}
arr1 是大方块的位置， arr2 为小方块的位置 ,arr为九宫格位置，有九项，但我们只要六项
所以有三项是没用的，如上图所示，[1，2]，[2，1]，[2，2] ，这里我用了一个LOCK。 目的是遍功九宫格的项，把第一个为它相邻的项取出来，表示大方块要移到的位置


接下来处理小方格的位置，把其他五项塞进ARR2里就行了。



如上图，点[1，2] ，红框表示他相邻的DIV，因为我设len < 4 的原因，所以会取到 [0,1][0,2][1,1][1,2] 这里没问题

但如果是



这样，因为九宫格遍历的关系，根据上面思路

if(Math.abs(arr[i][0] - x) <=1 && Math.abs(arr[i][1] - y) <=1 && len<4){
	    				if(!lock){
		    				arr1 =[arr[i][0],arr[i][1]];
		    				lock = true;
	    				}
	    				len ++;
	    			}else{
	    				arr2.push(arr[i]);
	    			}


它只会取到上面所标红色字的1，2，3，4 格。

而我所需要的是1，2，4，和点击的那一格，所以这里要特别处理一下。

if(y==1){
	    			if(Math.abs(arr[i][0] - x) <=1 && (arr[i][1] - y) >=0 && len<4){
	    				if(!lock){
		    				arr1 =[arr[i][0],arr[i][1]];
		    				lock = true;
	    				}
	    				len ++;
	    			}else{
	    				arr2.push(arr[i]);
	    			}
    			}
(arr[i][1] - y) >=0  这里作处理

接着就是移动后更新DIV的新位置
全部代码

<!doctype html>
<html>
<head lang="zh">
    <meta charset="utf-8">
    <title>灵域</title>
    <meta name="renderer" content="webkit">
    <script src="http://yygame.duowan.com/Web/Public/Jcode/js/jquery.min.js"></script>
    <link rel="alternate" media="only screen and(max-width:640px)" href="http://m.lizhi.fm/">

    <script>
    $(function(){
    	var pos =[]; //用来存放原来的位置，布局由FLOAT转为POSITION
    	var arr = []; //存放九宫格
    	var arr1 =[]; //用来存放放大方块的位置
    	var arr2 = [] ; // 用来存放5个小方块的位置
    	for(var i =0; i<3;i++){
    		for(var j =0; j<3;j++){
    			arr.push([i,j]);
    		}
    	}
    	var $divs = $('.wrap div');
    	var len = $divs.length;
    	for(var i=0;i<len;i++){
    		var $div = $divs.eq(i);
            pos.push([$div.position().left,$div.position().top]);
        }
    	$('.wrap div').each(function(i,item){
    		$(item).css({
    			left:pos[i][0],
                top:pos[i][1],
                position : 'absolute',
                margin : '0px'
    		});
    	})

    	$('.wrap').on('mouseover','div',function(){
    		if($('div:animated').length>0) return;
    		var x = $(this).data('row');
    		var y = $(this).data('col');
    		getPos(x,y);
    		$(this).animate({
    			left: arr1[1]*133,
    			top: arr1[0]*133,
    			width : 258,
    			height: 258
    		},function(){
    			$(this).data({
    				col:arr1[1],
    				row:arr1[0]
    			})
    		})
    		var $curDiv = $(this);
    		$('.wrap div').not($curDiv).each(function(i,item){
    			$(this).animate({
    				width:125,
    				height:125,
    				top: arr2[i][0]*133,
    				left:arr2[i][1]*133
    			}).data({
    				col:arr2[i][1],
    				row:arr2[i][0]
    			})
    		})

    	})

    	function getPos(x,y){
    		var lock = false;
    		arr2 =[];
    		len = 0;
    		for(var i = 0; i<arr.length;i++){
    			//要对Y=1进行额外处理,因为如果Y=1时，如果Math.abs(arr[i][0] - x) <=1 && Math.abs(arr[i][1] - y) <=1  作判断会产生6个[x,y]
    			if(y==1){
	    			if(Math.abs(arr[i][0] - x) <=1 && (arr[i][1] - y) >=0 && len<4){
	    				if(!lock){
		    				arr1 =[arr[i][0],arr[i][1]];
		    				lock = true;
	    				}
	    				len ++;
	    			}else{
	    				arr2.push(arr[i]);
	    			}
    			}else{
	    			if(Math.abs(arr[i][0] - x) <=1 && Math.abs(arr[i][1] - y) <=1 && len<4){
	    				if(!lock){
		    				arr1 =[arr[i][0],arr[i][1]];
		    				lock = true;
	    				}
	    				len ++;
	    			}else{
	    				arr2.push(arr[i]);
	    			}
    			}
    		}
    	}
    })
    	
    </script>
<style>
*{
	padding: 0;
	margin: 0;
}
.wrap{
	width: 400px;
	height: 400px;

}
.wrap div{
	float: left;
	margin-bottom: 8px;
	margin-right: 8px;
	width: 125px;
	height: 125px;
	background: green;
}
.wrap .big{width: 258px;
height: 258px;
background: blue;}
</style>
</head>
<body >
<div class="wrap">
		<div class="big" data-row="0" data-col="0">1</div>
		<div data-row="0" data-col="2">2</div>
		<div data-row="1" data-col="2">3</div>
		<div data-row="2" data-col="0">4</div>
		<div data-row="2" data-col="1">5</div>
		<div data-row="2" data-col="2">6</div>
	</div>
</body>
</html>


大功告成。有新的想法，你也可告诉我
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航