这个小项目(卡片秀)是一个卡片抽奖特效,用开源项目这样的词语让我多少有些羞愧,毕竟作为一个涉世未深的小伙子,用项目的标准衡量还有很大差距。不过该案例采用 jQuery 插件方式编写,提供配置参数并且做了浏览器兼容优化,整体而言作为一个小项目也不为过。目前正在持续更新。

话不多少,先上地址:https://github.com/nzbin/CardShow/tree/master

当然,博主写这篇文章不是为了炫耀这个 Demo,而是交流 jQuery 插件的编写以及这一项目中遇到的各种问题。现在的插件还有很多 bug 以及不完善的地方包括一些代码的冗余,后期会进行更细致的拆分组装等。

首先说一下这个项目的起因,博主最近接到了公司安排的一个抽奖页面,因为时间仓促以及其它原因,最后简单实现了功能并且添加了一些动画效果。但是最初看到设计图以卡片形式展示用户数据的时候,我就想到了能否做的稍微炫酷一点,随后便一直在构思。比如卡片的飞出、随机排列、自动及手动抽取以及翻转显示等效果。事实证明,把想法变现实会遇到很多的问题。大家可以点击 CardShow 查看自动抽卡的效果。目前的效果基本实现了我当初的构思。卡片的抽取效果主要分为自动抽手动抽两种。后期会添加卡片拖动的功能。我希望大家能够下载源码修改参数来查看效果,并提出宝贵意见,以便博主可以及时作出修改,大家的支持就是我前进的最大动力。

以下是我在写插件时遇到的问题以及解决的问题,大概包括 jQuery 插件编写、modernizr 使用、css3 动画、transitionend 事件、洗牌算法、相邻不重复随机数、获取 transform 的值、call() 的深入理解、setTimeout 的堵塞等等,每一块拿出来都可以单独写一篇文章,这篇文章只是简单介绍,之后也会就某一部分做深入探讨。

网友评论