JQuery 國際象棋棋盤 實現(xiàn)代碼
更新時間：2009年06月26日 12:24:48 作者：
前些時候為了熟悉國際象棋的各種開局，隨手寫了一個很簡單的國際象棋棋盤（實在找不到現(xiàn)成的）。
當(dāng)時沒覺得有什么，今天回頭看看，覺得還有點意思，拿來給大家鑒定一下。
首先要實現(xiàn)棋子的排布，這毫無疑問得用div+css了。
具體代碼可以看Jquery做的國際象棋棋盤（查看源代碼） 。
一開始我給每種棋子都寫了類，實際上這是比較愚蠢的行為。首先，這樣子css代碼會有冗余。其次，在棋子div上綁定偵聽器時會比較麻煩，要判斷是否棋子div時，我不得不靠類名中的-b和-w后綴來判斷是否棋子。但是如果我們將棋子的共同屬性提取出來專設(shè)一個類qizi，那么這兩個問題都可以迎刃而解。
在代碼中我特意沒有將之前的代碼去掉，你可以在注釋的代碼中看到。為了讓黑棋和白旗都可以移動，我不得不把一個方法寫上兩邊，你看，這就是沒有進(jìn)行足夠的抽象化的后果。
接下來就是實現(xiàn)拖動了，關(guān)于這個，大家可以參考
打包下載地址
內(nèi)容來自：http://buhutuu.cn/?p=783
首先要實現(xiàn)棋子的排布，這毫無疑問得用div+css了。
具體代碼可以看Jquery做的國際象棋棋盤（查看源代碼） 。
一開始我給每種棋子都寫了類，實際上這是比較愚蠢的行為。首先，這樣子css代碼會有冗余。其次，在棋子div上綁定偵聽器時會比較麻煩，要判斷是否棋子div時，我不得不靠類名中的-b和-w后綴來判斷是否棋子。但是如果我們將棋子的共同屬性提取出來專設(shè)一個類qizi，那么這兩個問題都可以迎刃而解。
在代碼中我特意沒有將之前的代碼去掉，你可以在注釋的代碼中看到。為了讓黑棋和白旗都可以移動，我不得不把一個方法寫上兩邊，你看，這就是沒有進(jìn)行足夠的抽象化的后果。
接下來就是實現(xiàn)拖動了，關(guān)于這個，大家可以參考
打包下載地址
內(nèi)容來自：http://buhutuu.cn/?p=783
相關(guān)文章
本文主要介紹了使用jQuery快速高效制作網(wǎng)頁交互特效的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了基于jQuery實現(xiàn)網(wǎng)頁打印功能，實現(xiàn)的打印功能大致跟瀏覽器的Ctrl+P效果一樣，感興趣的小伙伴們可以參考一下2015-12-12
在本篇文章中我們給大家?guī)砹薐query和CSS實現(xiàn)選擇框重置按鈕功能的相關(guān)代碼，需要的朋友們參考下。2018-11-11
jquery配合.NET實現(xiàn)點擊指定綁定數(shù)據(jù)并且能夠一鍵下載
本篇文章主要介紹了jquery配合.NET實現(xiàn)點擊指定綁定數(shù)據(jù)并且能夠一鍵下載，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-10-10
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)視頻展示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
JQuery自定義事件的應(yīng)用 JQuery最佳實踐
本文主要介紹JQuery框架里面支持的自定義事件模型，通過實例說明什么時候可以利用事件模型進(jìn)行面向?qū)ο蟮腏S編程，以及利用“帶命名空間的事件處理函數(shù)”來避免unbind時影響別的事件訂閱。2010-08-08
jQueryMobile之窗體長內(nèi)容的缺陷與解決方法實例分析
這篇文章主要介紹了jQueryMobile之窗體長內(nèi)容的缺陷與解決方法,結(jié)合具體實例形式分析了jQueryMobile底部懸浮層遮擋情況下的解決方法,非常簡單實用,需要的朋友可以參考下2017-09-09
以前使用js代碼來寫的簡單效果現(xiàn)在用jQ來寫，具體實現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
今天在工作中需要用到j(luò)Query組件里面的TomBox，可是發(fā)現(xiàn)以往做的Tombox失效了2010-06-06
本文主要對jQuery的基礎(chǔ)知識進(jìn)行介紹，非常適合剛開始接觸JQuery學(xué)習(xí)的朋友們，下面就跟小編一起來看下吧2016-12-12