這個(gè)小項(xiàng)目（卡片秀）是一個(gè)卡片抽獎(jiǎng)特效，用開源項(xiàng)目這樣的詞語(yǔ)讓我多少有些羞愧，畢竟作為一個(gè)涉世未深的小伙子，用項(xiàng)目的標(biāo)準(zhǔn)衡量還有很大差距。不過(guò)該案例采用 jQuery 插件方式編寫，提供配置參數(shù)并且做了瀏覽器兼容優(yōu)化，整體而言作為一個(gè)小項(xiàng)目也不為過(guò)。目前正在持續(xù)更新。
話不多少，先上地址：https://github.com/nzbin/CardShow/tree/master
當(dāng)然，博主寫這篇文章不是為了炫耀這個(gè) Demo，而是交流 jQuery 插件的編寫以及這一項(xiàng)目中遇到的各種問(wèn)題。現(xiàn)在的插件還有很多 bug 以及不完善的地方包括一些代碼的冗余，后期會(huì)進(jìn)行更細(xì)致的拆分組裝等。
首先說(shuō)一下這個(gè)項(xiàng)目的起因，博主最近接到了公司安排的一個(gè)抽獎(jiǎng)頁(yè)面，因?yàn)闀r(shí)間倉(cāng)促以及其它原因，最后簡(jiǎn)單實(shí)現(xiàn)了功能并且添加了一些動(dòng)畫效果。但是最初看到設(shè)計(jì)圖以卡片形式展示用戶數(shù)據(jù)的時(shí)候，我就想到了能否做的稍微炫酷一點(diǎn)，隨后便一直在構(gòu)思。比如卡片的飛出、隨機(jī)排列、自動(dòng)及手動(dòng)抽取以及翻轉(zhuǎn)顯示等效果。事實(shí)證明，把想法變現(xiàn)實(shí)會(huì)遇到很多的問(wèn)題。大家可以點(diǎn)擊 CardShow 查看自動(dòng)抽卡的效果。目前的效果基本實(shí)現(xiàn)了我當(dāng)初的構(gòu)思?？ㄆ某槿⌒Ч饕譃?strong>自動(dòng)抽及手動(dòng)抽兩種。后期會(huì)添加卡片拖動(dòng)的功能。我希望大家能夠下載源碼修改參數(shù)來(lái)查看效果，并提出寶貴意見，以便博主可以及時(shí)作出修改，大家的支持就是我前進(jìn)的最大動(dòng)力。
以下是我在寫插件時(shí)遇到的問(wèn)題以及解決的問(wèn)題，大概包括 jQuery 插件編寫、modernizr 使用、css3 動(dòng)畫、transitionend 事件、洗牌算法、相鄰不重復(fù)隨機(jī)數(shù)、獲取 transform 的值、call() 的深入理解、setTimeout 的堵塞等等，每一塊拿出來(lái)都可以單獨(dú)寫一篇文章，這篇文章只是簡(jiǎn)單介紹，之后也會(huì)就某一部分做深入探討。
