手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JQuery 国际象棋棋盘 实现代码
JQuery 国际象棋棋盘 实现代码
摘要:当时没觉得有什么,今天回头看看,觉得还有点意思,拿来给大家鉴定一下。首先要实现棋子的排布,这毫无疑问得用div+css了。具体代码可以看Jq...

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

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

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

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

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

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

打包下载地址

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

【JQuery 国际象棋棋盘 实现代码】相关文章:

jQuery实现文本展开收缩特效

些很实用且必用的小脚本代码

jQuery插件实现适用于移动端的地址选择器

jquery合并表格中相同文本的相邻单元格

jQuery实现返回顶部功能

JQuery中Text方法用法实例分析

jQuery结合ajax实现动态加载文本内容

JQuery中DOM事件合成用法实例分析

鼠标图片振动代码

Js和JQuery获取鼠标指针坐标的实现代码分享

精品推荐
分类导航