Heim > Web-Frontend > js-Tutorial > JQuery 国际象棋棋盘 实现代码_jquery

JQuery 国际象棋棋盘 实现代码_jquery

WBOY
Freigeben: 2016-05-16 18:50:53
Original
3565 Leute haben es durchsucht

当时没觉得有什么,今天回头看看,觉得还有点意思,拿来给大家鉴定一下。

首先要实现棋子的排布,这毫无疑问得用div+css了。

具体代码可以看Jquery做的国际象棋棋盘(查看源代码) 。

一开始我给每种棋子都写了类,实际上这是比较愚蠢的行为。首先,这样子css代码会有冗余。其次,在棋子div上绑定侦听器时会比较麻烦,要判断是否棋子div时,我不得不靠类名中的-b和-w后缀来判断是否棋子。但是如果我们将棋子的共同属性提取出来专设一个类qizi,那么这两个问题都可以迎刃而解。

在代码中我特意没有将之前的代码去掉,你可以在注释的代码中看到。为了让黑棋和白旗都可以移动,我不得不把一个方法写上两边,你看,这就是没有进行足够的抽象化的后果。

接下来就是实现拖动了,关于这个,大家可以参考

打包下载地址

内容来自:http://buhutuu.cn/?p=783

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage