jQuery实现网页拼图游戏

之前看了一个页面中将图片分割的效果,感觉不错,有些好奇他是怎么实现的。

跟搭档说了一下,大概明白。其实就是利用 overflow=hidden ,margin-left, margin-top 这三个属性的配合,让人感觉图片被一个个格子地分开了。

刚刚写了个 Jquery的小插件,处理了整个的图片分格化,用户只要指定一个图片就可以自动生成格子图片,还自动生成“打乱”,“复原”,行,列等按钮。同时具有提示位置正确的图片数的功能。

看效果:

1.生成格子图片成功:

jQuery实现网页拼图游戏_第1张图片

2.打乱图片次序

jQuery实现网页拼图游戏_第2张图片

3.手动设置行列,这里限定了最大的行列都是 10 ,最小是3,多了会眼花撩乱。

jQuery实现网页拼图游戏_第3张图片

4.再次打乱

jQuery实现网页拼图游戏_第4张图片

5.去除小格子的边框,去除了图片分格子就不明显了

在页面上这用调用:

完整的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($("
").attr("id","control").css("position","absolute").css("top",SYSTEM.height+8+((options.isBorder)?(options.row):0)+'px').css("right","0px").css("width",SYSTEM.Width/3).css("height",SYSTEM.sonHeight) .append($("").attr("id","correctInfo")) .append($("

你可能感兴趣的:(jQuery实现网页拼图游戏)