当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery 国际象棋棋盘 实现代码

Javascript
一个短小精悍使用的对象化QQ菜单
用数据岛生成翻页程序
轻松实现删除确认
IE5中用JavaScript跨frame加option问题
IE6无提示关闭窗口,不是利用activeX
下拉框联动
用dhtml做了一个密码管理器
面向对象的JavaScript编程
网 络 病 毒 与 防 范 措 施
破解网页禁止鼠标右键的技巧
JS编写的俄罗斯方块
通过代码改变客户端所显示的语言类型
欢迎精灵
事件处理函数OnEnter OnExit 使用一例
称三次从12球中找出唯一但不知轻重的球
VML实现的饼图(JavaScript类封装)
搜索gb2312汉字在网上的频率
真正的 用JS 做的 loading
Vml:应用阿基米德算法在网页制作动画,原程+注释
贴一例:当所有图片下载完毕时,然后显示网页(有进度)

Javascript 中的 JQuery 国际象棋棋盘 实现代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 159 ::
收藏到网摘: n/a

前些时候为了熟悉国际象棋的各种开局,随手写了一个很简单的国际象棋棋盘(实在找不到现成的)。 当时没觉得有什么,今天回头看看,觉得还有点意思,拿来给大家鉴定一下。
首先要实现棋子的排布,这毫无疑问得用div+css了。
具体代码可以看Jquery做的国际象棋棋盘(查看源代码) 。
一开始我给每种棋子都写了类,实际上这是比较愚蠢的行为。首先,这样子css代码会有冗余。其次,在棋子div上绑定侦听器时会比较麻烦,要判断是否棋子div时,我不得不靠类名中的-b和-w后缀来判断是否棋子。但是如果我们将棋子的共同属性提取出来专设一个类qizi,那么这两个问题都可以迎刃而解。
在代码中我特意没有将之前的代码去掉,你可以在注释的代码中看到。为了让黑棋和白旗都可以移动,我不得不把一个方法写上两边,你看,这就是没有进行足够的抽象化的后果。
接下来就是实现拖动了,关于这个,大家可以参考
打包下载地址
内容来自:http://buhutuu.cn/?p=783