欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實現(xiàn)網(wǎng)頁拼圖游戲

 更新時間：2020年04月22日 16:28:06   作者：集成顯卡  
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)網(wǎng)頁拼圖游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

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

看效果：

1.生成格子圖片成功：

2.打亂圖片次序

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

4.再次打亂

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

在頁面上這用調(diào)用：

<div style="width:640px; height:400px;">
 <img id="origin" class="myimage" src="11.jpg"/>
</div><div id="targetDiv"></div>
<script>
$(document).ready(function(){
 
 $("#origin").tablePic({
 target: 'targetDiv',col:4,row:3,borderColor:'#fff',freeColor:'#cec'
 });
 
});
</script>

完整的js：

(function($){
 /*
 * 坐標(biāo)類
 * @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',//是否嚴(yán)格判斷格式相鄰移到，如果不是strict，那么就是不管怎樣都是直接和空白格式內(nèi)容交換
 freeColor:'#92cf28' //空白格子的背景顏色
 }
 
 var options=$.extend(DEFAULT,options);
 //系統(tǒng)變量
 var SYSTEM={
 width:0,height:0,
 //小格子的大小
 sonWidth:0,sonHeight:0,
 src:null,
 current:'',correct:0,//正確個數(shù)
 hits:0//步數(shù)
 }
 var parent=null;//這個是待分割的圖片
 var target=null;//這個是格子存放的容器，一般是一個div，也應(yīng)該是?。。。?！別搞獨特=.=
 
 //這個是左，上 的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();
 });
 
 //初始化目標(biāo)
 function init(){
 target=$("#"+options.target);
 initTarget();
 //最后我們要添加一個空白的divprepend
 target.append($("<div/>").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($("<span/>").attr("id","correctInfo"))
 .append($("<button/>").bind("click",function(){initMargin();}).append("復(fù)原"))
 .append($("<button/>").bind("click",function(){mixMargin();}).append("打亂"))
 .append($("<button/>").attr("id","isBorder").bind("click",function(){border();}).append(((options.isBorder)?"去除":"添加")+"邊框"))
 .append(" 行:")
 .append($("<select/>").attr("id","rowSelect"))
 .append("列:")
 .append($("<select/>").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");
 }
 /**
 * 設(shè)置兩個 select的屬性，并添加事件
 */
 function initSelect(){
 for(var i=3;i<=10;i++){
 $("#rowSelect").append($("<option/>").attr("vaule",i).append(i));
 $("#colSelect").append($("<option/>").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();
 });
 });
 }
 
 /**
 * 邊框的設(shè)置
 */
 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);
 //生成格子，基本形式：
 //<div class="miniDiv">
  // <div><img src="?????"/></div>
  // </div>
 //
 //為了兼容神奇的ie6，我們添加一個div在外圍
 var $temp=$("<div/>");
 target.append($temp);
 for(var i=0;i<options.row*options.col;i++){
  if(margin[i].left==options.col-1&&margin[i].top==options.row-1){
  $temp.append($("<div/>").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($("<div/>").css("width","100%").css("height","100%").css("background-color",options.freeColor)));
  SYSTEM.current='gz'+(i+1);
  }
  else{
  $temp.append($("<div/>").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(
  $("<div/>").css("margin-left",(margin[i].left*SYSTEM.sonWidth)*-1+"px").css("margin-top",(margin[i].top*SYSTEM.sonHeight)*-1+"px")
  .append($("<img/>").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<options.row;i++){
  for(var j=0;j<options.col;j++)
  margin[temp++]=new Point(i,j);
 }
 initImage();
 }
 
 //打亂圖片次序
 //使用 margin.splice 不能正確返回被刪除的數(shù)組元素，這里使用一個 中間 數(shù)組進行隨機排序
 function mixMargin(){
 var temp1=new Array();
 var temp2=new Array();
 for(var i=0;i<options.col*options.row;i++){
 temp2[i]=i;
 }
 //使用 js 的splice 函數(shù)得到隨機排序的數(shù)組
 for(var i=0;i<options.col*options.row;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;
  //如果設(shè)定了mode為strict，就判斷是不是與空白格子相鄰，只有相鄰了才可以發(fā)生效果
  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();
 });
 }
 }
 
 /*
 * 檢查當(dāng)前正確的圖片數(shù)
 */
 function checkRight(){
 SYSTEM.correct=0;
 for(var i=0;i<options.col*options.row-1;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);

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論