首先，先看效果图，点击小图，放大，大图变小。
然后想一下，叉，这么难的效果，可以实现么
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>如下：
*{
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;}
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'
});
})
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>
可以看成，是看成是九宫格里，旁边的最早出现的格子的定位，如我就击的 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>大功告成。有新的想法，你也可告诉我
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
