之前看了一個頁面中將圖片分割的效果，感覺不錯，有些好奇他是怎么實現的。

跟搭檔說了一下，大概明白。其實就是利用 overflow=hidden ，margin-left, margin-top 這三個屬性的配合，讓人感覺圖片被一個個格子地分開了。

剛剛寫了個 Jquery的小插件，處理了整個的圖片分格化，用戶只要指定一個圖片就可以自動生成格子圖片，還自動生成“打亂”，“復原”，行，列等按鈕。同時具有提示位置正確的圖片數的功能。

看效果：

1.生成格子圖片成功：

2.打亂圖片次序

3.手動設置行列，這里限定了最大的行列都是 10 ，最小是3，多了會眼花撩亂。

4.再次打亂

5.去除小格子的邊框，去除了圖片分格子就不明顯了

在頁面上這用調用：

$(document).ready(function(){

$("#origin").tablePic({

target: 'targetDiv',col:4,row:3,borderColor:'#fff',freeColor:'#cec'

});

});

完整的js：

(function($){

/*

* 坐標類

* @param {Object} x

* @param {Object} y

* @memberOf {TypeName}

*/

function Point(x,y){

this.top=x;

this.left=y;

}

/**

* 修正版本，原圖右下角的小圖不顯示，是活動格子

* 添加 “打亂”，“換圖按鈕”

*

* @param {Object} options

* @memberOf {TypeName}

* @return {TypeName}

*/

$.fn.tablePic=function(options){

var DEFAULT={

target:'',

row:2,

col:2,

isBorder:true,

borderColor:'#f88',

mode:'strict',//是否嚴格判斷格式相鄰移到，如果不是strict，那么就是不管怎樣都是直接和空白格式內容交換

freeColor:'#92cf28' //空白格子的背景顏色

}

var options=$.extend(DEFAULT,options);

//系統變量

var SYSTEM={

width:0,height:0,

//小格子的大小

sonWidth:0,sonHeight:0,

src:null,

current:'',correct:0,//正確個數

hits:0//步數

}

var parent=null;//這個是待分割的圖片

var target=null;//這個是格子存放的容器，一般是一個div，也應該是！！！！！別搞獨特=.=

//這個是左，上 的margin

var margin=new Array();

this.each(function(){

parent=$(this);

SYSTEM.src=parent.attr("src");

SYSTEM.width=parseInt(parent.css("width"));

SYSTEM.height=parseInt(parent.css("height"));

SYSTEM.sonWidth=Math.round(SYSTEM.width/options.col);

SYSTEM.sonHeight=Math.round(SYSTEM.height/options.row);

init();

initMargin();

});

//初始化目標

function init(){

target=$("#"+options.target);

initTarget();

//最后我們要添加一個空白的divprepend

target.append($("

.append($("").attr("id","correctInfo"))

.append($("").bind("click",function(){initMargin();}).append("復原"))

.append($("").bind("click",function(){mixMargin();}).append("打亂"))

.append($("").attr("id","isBorder").bind("click",function(){border();}).append(((options.isBorder)?"去除":"添加")+"邊框"))

.append(" 行:")

.append($("").attr("id","rowSelect"))

.append("列:")

.append($("").attr("id","colSelect"))

);

initSelect();

}

function initTarget(){

SYSTEM.sonWidth=Math.floor(SYSTEM.width/options.col);

SYSTEM.sonHeight=Math.floor(SYSTEM.height/options.row);

target.css("width",SYSTEM.width+'px').css("height",SYSTEM.height+'px');

//是否顯示邊框

if(options.isBorder){

target.css("width",SYSTEM.width+options.col+'px').css("height",SYSTEM.height+options.row+'px');

}

target.css("position","relative");

}

/**

* 設置兩個 select的屬性，并添加事件

*/

function initSelect(){

for(var i=3;i<=10;i++){

$("#rowSelect").append($("").attr("vaule",i).append(i));

$("#colSelect").append($("").attr("vaule",i).append(i));

}

target.find("select").each(function(){

$(this).change(function(){

options.row=parseInt($("#rowSelect").val());

options.col=parseInt($("#colSelect").val());

initTarget();

initMargin();

});

});

}

/**

* 邊框的設置

*/

function border(){

options.isBorder=!options.isBorder;

//initTarget();

//initMargin();

target.children(":not(#control)").children().each(function(){

$(this).css("border-top",(options.isBorder?"1px solid "+options.borderColor:"none")).css("border-left",(options.isBorder?"1px solid "+options.borderColor:"none"));

});

$("#isBorder").html(((options.isBorder)?"去除":"添加")+"邊框");

}

function initImage(){

//清空 target

target.children(":not(#control)").remove();

$("#rowSelect").val(options.row);

$("#colSelect").val(options.col);

//生成格子，基本形式：

//

//

//

//

//為了兼容神奇的ie6，我們添加一個div在外圍

var $temp=$("

target.append($temp);

for(var i=0;i

if(margin[i].left==options.col-1&&margin[i].top==options.row-1){

$temp.append($("

.append($("

SYSTEM.current='gz'+(i+1);

}

else{

$temp.append($("

$("

.append($("").attr("src",SYSTEM.src).css("width",SYSTEM.width+'px').css("height",SYSTEM.height+'px').css("display","block"))

));

}

}

initHandle();

checkRight();

}

//初始化 margin 這個屬性

function initMargin(){

var temp=0;

for(var i=0;i

for(var j=0;j

margin[temp++]=new Point(i,j);

}

initImage();

}

//打亂圖片次序

//使用 margin.splice 不能正確返回被刪除的數組元素，這里使用一個 中間 數組進行隨機排序

function mixMargin(){

var temp1=new Array();

var temp2=new Array();

for(var i=0;i

temp2[i]=i;

}

//使用 js 的splice 函數得到隨機排序的數組

for(var i=0;i

temp1[i]=margin[temp2.splice(Math.floor(Math.random()*temp2.length),1)];

}

margin=temp1;

initImage();

}

/**

* 添加事件

* @memberOf {TypeName}

* @return {TypeName}

*/

function initHandle(){

for(var i=0;i<=options.col*options.row;i++){

$("#gz"+i).bind("click",function(){

var newId=$(this).attr("id");

if(newId==SYSTEM.current)

return false;

//如果設定了mode為strict，就判斷是不是與空白格子相鄰，只有相鄰了才可以發生效果

if(options.mode=='strict'){

if(SYSTEM.current=='gz0'&&newId!=('gz'+options.col))

return false;

var ii=parseInt(newId.substring(2));

var jj=parseInt(SYSTEM.current.substring(2));

if(!(Math.abs(ii-jj)==1||Math.abs(ii-jj)==options.col))

return false;

}

var temp=$(this).html();

$(this).html($("#"+SYSTEM.current).html());

$("#"+SYSTEM.current).html(temp);

SYSTEM.current=$(this).attr("id");

checkRight();

});

}

}

/*

* 檢查當前正確的圖片數

*/

function checkRight(){

SYSTEM.correct=0;

for(var i=0;i

var $temp=$("#gz"+(i+1)).children(":first");

if($temp.html()!=''&&parseInt($temp.css("margin-left"))==(-1*SYSTEM.sonWidth*(i%options.col))&&parseInt($temp.css("margin-top"))==(-1*SYSTEM.sonHeight*Math.floor(i/options.col))){

SYSTEM.correct++;

}

}

showCorrect();

}

/*

* 顯示正確的圖片信息

*/

function showCorrect(){

$("#correctInfo").html("正確圖片:"+SYSTEM.correct+"/"+(options.col*options.row-1)+" ");

}

}

})(jQuery);

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的用html实现网页版的拼图游戏,jQuery实现网页拼图游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。