jQuery如何实现网页拼图游戏

(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($("").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").attr("id","gz"+(i+1)).css("border-top",(options.isBorder?"1px solid "+options.borderColor:"none")).css("border-left",(options.isBorder?"1px solid "+options.borderColor:"none")).css("width",SYSTEM.sonWidth).css("height",SYSTEM.sonHeight).css("overflow","hidden").css("float","left")
  .append($("
").css("width","100%").css("height","100%").css("background-color",options.freeColor)));
  SYSTEM.current='gz'+(i+1);
  }
  else{
  $temp.append($("
").attr("id","gz"+(i+1)).css("border-top",(options.isBorder?"1px solid "+options.borderColor:"none")).css("border-left",(options.isBorder?"1px solid "+options.borderColor:"none")).css("width",SYSTEM.sonWidth).css("height",SYSTEM.sonHeight).css("overflow","hidden").css("float","left").append(
  $("
").css("margin-left",(margin[i].left*SYSTEM.sonWidth)*-1+"px").css("margin-top",(margin[i].top*SYSTEM.sonHeight)*-1+"px")
  .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
看完上述内容，是不是对jQuery如何实现网页拼图游戏有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。
            
            
                        

            网站栏目：jQuery如何实现网页拼图游戏            

            当前链接：http://shouzuofang.com/article/phopih.html
        
    
    

        
其他资讯
        

            

                    Python中list和set的区别是什么
                

                    Rancher2.5中的API和Dashboard有什么作用
                

                    css怎么实现旋转翻牌动画效果
                

                    在没有源代码的情况下如何对Linux二进制代码进行模糊测试
                

                    织梦不能上传jpg格式的图片如何解决