jQuery實(shí)現(xiàn)網(wǎng)頁(yè)拼圖游戲
之前看了一個(gè)頁(yè)面中將圖片分割的效果,感覺(jué)不錯(cuò),有些好奇他是怎么實(shí)現(xiàn)的。
跟搭檔說(shuō)了一下,大概明白。其實(shí)就是利用 overflow=hidden ,margin-left, margin-top 這三個(gè)屬性的配合,讓人感覺(jué)圖片被一個(gè)個(gè)格子地分開(kāi)了。
剛剛寫了個(gè) Jquery的小插件,處理了整個(gè)的圖片分格化,用戶只要指定一個(gè)圖片就可以自動(dòng)生成格子圖片,還自動(dòng)生成“打亂”,“復(fù)原”,行,列等按鈕。同時(shí)具有提示位置正確的圖片數(shù)的功能。
看效果:
1.生成格子圖片成功:
2.打亂圖片次序
3.手動(dòng)設(shè)置行列,這里限定了最大的行列都是 10 ,最小是3,多了會(huì)眼花撩亂。
4.再次打亂
5.去除小格子的邊框,去除了圖片分格子就不明顯了
在頁(yè)面上這用調(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; } /** * 修正版本,原圖右下角的小圖不顯示,是活動(dòng)格子 * 添加 “打亂”,“換圖按鈕” * * @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,//正確個(gè)數(shù) hits:0//步數(shù) } var parent=null;//這個(gè)是待分割的圖片 var target=null;//這個(gè)是格子存放的容器,一般是一個(gè)div,也應(yīng)該是?。。。?!別搞獨(dú)特=.= //這個(gè)是左,上 的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(); //最后我們要添加一個(gè)空白的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è)置兩個(gè) 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,我們添加一個(gè)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 這個(gè)屬性 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ù)組元素,這里使用一個(gè) 中間 數(shù)組進(jìn)行隨機(jī)排序 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ù)得到隨機(jī)排序的數(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);
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能 jQuery實(shí)現(xiàn)計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能,jQuery實(shí)現(xiàn)計(jì)時(shí)器功能的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09jquery中each遍歷對(duì)象和數(shù)組示例
jquery中each可用于遍歷對(duì)象和數(shù)組,如需退出each循環(huán)可使回調(diào)函數(shù)返回false,下面有個(gè)示例,大家可以看看2014-08-08EasyUI的treegrid組件動(dòng)態(tài)加載數(shù)據(jù)問(wèn)題的解決辦法
最近涉及到treegrid組件的查詢,需要根據(jù)查詢條件動(dòng)態(tài)更新EasyUI的treegrid組件的動(dòng)態(tài)加載查詢結(jié)果2011-12-12ajax更新數(shù)據(jù)后,jquery、jq失效問(wèn)題
這問(wèn)題遇到兩次,竟然忘記了。所以說(shuō)不要關(guān)抄人家的方法,要多研究下。現(xiàn)在做個(gè)記錄...2011-03-03jQuery實(shí)現(xiàn)可拖動(dòng)的浮動(dòng)層完整代碼
使用jQuery實(shí)現(xiàn)可拖動(dòng)的浮動(dòng)層的完整代碼,復(fù)制保存到html文件就可以體驗(yàn)效果.光標(biāo)移動(dòng)到層上,按住鼠標(biāo)就可以拖動(dòng)層2013-05-05基于jQuery UI CSS Framework開(kāi)發(fā)Widget的經(jīng)驗(yàn)
jQuery UI CSS Framework是jQuery UI中的一個(gè)樣式框架,可以利用jQuery Theme roller 來(lái)生成自己想要的css樣式效果。我們可以利用jQuery UI的一些框架來(lái)開(kāi)發(fā)出基于jQuery UI CSS Framework效果的插件來(lái)。2010-08-08jQuery 中使用JSON的實(shí)現(xiàn)代碼
json 是 Ajax 中使用頻率最高的數(shù)據(jù)格式,在瀏覽器和服務(wù)器中之間的通訊可離不開(kāi)它2011-12-12