-
{ { 1 }如何生成图片网格，我想有两种方法：
（1）把这个大图片分成16小块，然后用img标签的src
（2）只有一个大的图片，然后每个元素的背景图是削减和CSS背景位置的定位，这就需要16个数组{ 0 }，{ - 150,0 }，{ - 300,0 }…
图像背景位置和阵列位置阵列的{ }阵列
在选用css时生成数据位置图。
所需的CSS背景定位阵列：{ 0 }，{ - 150,0 }，{ - 300,0 }，{ - 450,0 }，
{ 0，- 150 }，{ - 150，- 150 }，{ - 300，- 150 }，{ - 450，- 150 }，
{ 0，- 300 }，{ - 150，- 300 }，{ - 300，- 300 }，{ - 450，- 300 }，
{ 0，- 450 }，{ - 150，- 450 }，{ - 300，- 450 }，{ - 450，- 450 }
它们用于{ 0，- 150，- 300，- 450 }值（这是我的定义图片高，宽度150倍，所以数值）将通过自动生成数组{这个值使用}。
复制代码代码如下所示：
/ / this.ncol这里是4 -因为我的拼图是4 * 4
/ / this.narea是150，每一张图片的宽、高（600px / 4）600×600大
var L = { }，
p＝{ }；
对于（n = 0 n＜VaR；this.ncol；n + +）{
L.push（N *（这个面积+ 1））； / /阵列布局定位{ 0151302453 }网格生成，因为我需要边界效应（图中绿色边框），所以用CSS定位背景的阵列是不一样的
P.push（N *。Narea）； / / 150，生成{ 0，300，450 }上面所说的，CSS背景的价值取向
}
对于（var i = 0；i < this.nlen；i++）{ / / this.nlen 16
var t = parseInt（我/本。ncol），
K =我这。ncol * T，
ap = }，
al = }；
AP.push（P { } { } P K，T，I）； / /我把CSS的附加背景取向排列的我，是在判断第三步，不需要设置CSS属性，我把它作为在{ bg-i标签属性}
AL.push（L { k }，我{不}）；
这abgp {我} = AP；
这种布置{我} =铝；
}
{三}判断它是否完成
二元（DIV）利用CSS背景定位，abgp { 1 }（{ } - 150,0,1价值），而这是随机分配的布局位置。ALayout { 3 }（其中3是随机生成的）（值{ 453,0 }），然后左：453px，顶：0。
移动元素，改变是左，最高价值，而不是为了结构自身获得左元素，最高值（如果是移到左边：151px，顶：0本。ALayout { 1 }），然后用{ }（1 151,0价值指数，这本身属性是{ } = 1这bg-i。abgp { 1 }指标）判断，相等的元素移动后的位置是正确的。
详细的代码：
复制代码代码如下所示：
*
版本：2
* /
功能gypuzzlegame（选项）{
this.target = $（选择目标）；
this.data = option.data； / /图片资料
this.opt =选项；
this.nlen = option.count； / /多少的拼图
this.acollayout = option.acollayout { 0151302453 } / / | |水平阵列布局；
this.arowlayout = option.arowlayout { 0151 } / / | |；垂直阵列布局
this.acolbgp = option.acolbgp | | { 0，150，300，450 }； / /水平阵列布局
this.arowbgp option.arowbgp { 150 } = 0； / / | |，垂直阵列布局
this.ncol = this.acollayout.length；
this.nrow = this.arowlayout.length；
this.alayout = {}； / /阵列布局
this.abgp = {}； / / CSS背景定位数组
This.init（）；
}
gypuzzlegame.prototype = { {
GetRand：功能（A，R）{
VaR序列= a.slice（0），
newarry = { }；
对于（var n＝0；n < r；n + +）{
VaR NR = parseInt（Math.random（）*数组长度）；
NewArry.push（哈利{ NR }）；
Arry.splice（NR，1）；
}
返回newarry；
}，
SETPOS：函数（）{
对于（var i = 0；i < this.nlen；i++）{
var t = parseInt（我/本。ncol），
L =我这。ncol * T，
ap = }，
al = }；
AP.push（这个。acolbgp {我}，这。arowbgp {T}，我）；
AL.push（这个。acollayout {我}，这。arowlayout {T}）；
这abgp {我} = AP；
这种布置{我} =铝；
}
}，
伊斯帕斯：功能（项目）{
无功_that =这，
＝0；
item.each（函数（）{（）
var = parseInt（$（this）。Css（右）），
T = parseInt（$（this）。Css（最重要的）），
我= parseInt（$（this）。Attr（'data-bgi '））；
如果（L = = _that。ALayout {我} { 0 } T = = _that。ALayout {我} { 1 }）{
是++；
}
}）；
回报是；
}，
CreateDom：函数（）{
无功规划= this.getrand（this.alayout，这。nlen）；
/ / console.log（布局）；
对于（n = 0 n＜VaR；this.nlen；n + +）{
var t = parseInt（n /本。ncol），
L = N -这。ncol * T；
var = $（）。
CSS（{右：布局{ } { 0 } + 'px，
顶：布局{ } { 1 } + 'px，
背景图像：'url（+本。数据+ '）'，
背景：这个位置。abgp { } { 0 } + 'px++本。abgp { } { 1 } + 'px
}）；
This.target.append（HTML）；
}
}，
移动：函数（）{
var div =美元this.target.find（'。puzzle_list），
这_that =；
无功haselem =函数（）{（）
var = false；
div.each美元（函数（）{（）
如果（$（this）。HasClass（））{
T＝真；
}
}）；
返回T；
}；
单击
div.click美元（函数（）{（）
var $ = $（这个）；
如果（haselem（）！this.hasclass美元（））{
var（=）；
如果（div.eq美元（指数），（'：动画）| |这个美元（'：动画））{
返回false；
}
var = div.eq美元（指数），位置（leave的过去式和过去分词），
T = div.eq美元（指数），位置（顶部），
MYL = this.position美元（leave的过去式和过去分词），
MYT = $ this.position（顶部）；
$（这）。动画（{右：L，' '：T }）；
$div.eq (index).Css ({'z-index':'1'}).Animate ({'left': myl,'top': myt}, function ()) {
$（这）。RemoveClass（）；
$（这）找到（'span）删除（）；
$（这）。Css（{ 'z-index'：‘0'}）；
如果（_that.ispass（$ DIV）= = _that。nlen）{
如果（typeof _that.opt.success = = 'function）{
_that.opt.success（{目标：_that。目标}）；
}
}
}）；
}
{其他
如果（$ this.hasclass（））{
this.removeclass美元（）；
this.find美元（'span）删除（）；
}
{其他
this.addclass美元（）。追加（）；
}
}
}）；
}，
init：函数（）{
设置CSS背景位置和布局数组元素
This.setPos（）；
创建元素
This.createDom（）；
移动图片
This.move（）；
}
}
调用示例
新的gypuzzlegame（{
数据：'images / 03。JPG，
目标：#霸'，
伯爵：8，
成功：函数（选择）{
Opt.target.append（'congratulations通'）；
}
}）；