卡片抽奖插件 CardShow
前言
这个小项目(卡片秀)是一个卡片抽奖特效插件,用开源项目这样的词语让我多少有些羞愧,毕竟作为一个涉世未深的小伙子,用项目的标准衡量还有很大差距。不过该案例采用 jQuery 插件方式编写,提供配置参数并且做了浏览器兼容优化,整体而言作为一个小项目也不为过。目前正在持续更新。
当然,博主写这篇文章不是为了炫耀这个 Demo,而是交流 jQuery 插件的编写以及这一项目中遇到的各种问题。现在的插件还有很多 bug 以及不完善的地方包括一些代码的冗余,后期会进行更细致的拆分组装等。
首先说一下这个项目的起因,博主最近接到了公司安排的一个抽奖页面,因为时间仓促以及其它原因,最后简单实现了功能并且添加了一些动画效果。但是最初看到设计图以卡片形式展示用户数据的时候,我就想到了能否做的稍微炫酷一点,随后便一直在构思。比如卡片的飞出、随机排列、自动及手动抽取以及翻转显示等效果。事实证明,把想法变现实会遇到很多的问题。大家可以点击 CardShow 查看自动抽卡的效果。目前的效果基本实现了我当初的构思。卡片的抽取效果主要分为自动抽及手动抽两种。后期会添加卡片拖动的功能。我希望大家能够下载源码修改参数来查看效果,并提出宝贵意见,以便博主可以及时作出修改,大家的支持就是我前进的最大动力。
以下是我在写插件时遇到的问题以及解决的问题,大概包括 jQuery 插件编写、modernizr 使用、css3 动画、transitionend 事件、洗牌算法、相邻不重复随机数、获取 transform 的值、call() 的深入理解、setTimeout 的堵塞等等,每一块拿出来都可以单独写一篇文章,这篇文章只是简单介绍,之后也会就某一部分做深入探讨。
jQuery 插件的编写
话说很多事情看着简单,做起来很难。如果不理解原生 js 的对象、函数、原型、作用域以及 jQuery 的核心思想及方法,想写一个插件可能真的非常困难。对于 jQuery 插件的编写我就不多说了,网上一搜很多,比我写的好的更多,我只贴一下自己写的插件的结构。对于代码的结构我思考了很久也研究了很久,最后借鉴了一些案例,感觉以下结构更清晰,更简洁,更易懂。
;(function(window, $) { // 插件主体
$.plugin = function(el,options){ }
// 默认配置
$.plugin.defaults = { }
// 原型方法
$.plugin.prototype = { }
// 设置 jQuery 插件
$.fn.plugin = function(options) { return instance; } })(window, jQuery);
Modernizr 的使用
modernizr 也算是一个老牌的浏览器兼容方案了,相信大家也早已使用或者早有耳闻。之前虽然早就知道这个小东西,应该是接触 bootstrap 时了解的,但一直未有机会使用,直到现在写插件才发现,用它检测 css3 的属性并做兼容方案真的是爽歪歪。网上关于 modernizr 的文章并不多,这是官网文档:https://modernizr.com/docs ,已经说得很详细,我之后会翻译该文。
相邻不重复随机数
解决这个问题多少让我有一些成就感,虽然还不是很完美。这个问题简单说就是:写一个函数,使其可以持续输出随机数,而相邻位置的随机数不相同。对于这个问题我没有搜索到答案,搜到最多的是产生不重复的随机数。这完全是两个问题,这个问题看起来不难,无非定义对比变量,但问题就在于怎么对比,怎么写函数。之前看到有人说“算法就像窗户纸”,现在深有体会。解决这个问题多少有些运气的成分,想了很久,最后随手一写,竟然成功了。可能这个问题本身真的不难。我建议大家先不要展开代码,自己写一个函数,用 setInterval 持续输出随机数,能否做到相邻不重复。也希望大家给我一个更完美的方案,欢迎留言。
// 产生相邻不重复的随机数,n 为随机数个数
// 定义比较变量,能否将其封装在函数内?
var b = 0; function random(n) {
var a = Math.floor(Math.random() * n); if (a == b) {
return random(n);
} else {
b = a;
return b;
} };
该问题已经得到解决,具体请参考相邻不重复随机数的生成及优化
洗牌算法
洗牌算法的原始方法由 Ronald Fisher 和 Frank Yates 提出,网上可以搜到很多,以下是常见的 JS 方法:
// 数组随机变换函数
function shuffleArr(array) {
var m = array.length,
t, i;
// While there remain elements to shuffle…
while (m) {
// Pick a remaining element…
i = Math.floor(Math.random() * m--);
// And swap it with the current element.
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
};
如何获取 transform 的值
因为动画以 transition 为主,所以要持续操作元素的 transform 的值。但是 transform 是一个复合值,取出特定数值有一定困难。我的解决办法简单粗暴。我在控制台打印 transform 的值得时候发现是一个 matrix 的东西。关于 transform 的矩阵知识大家自行搜索。其实就是一个字符串,只要 split() 方法取出特定值即可。但是这里面有个浏览器兼容的问题。众所周知,transform2d 是 3X3 矩阵,而 transform3d 是 4X4 矩阵,如果使用 transform3d 属性而没有给出第三个值,在火狐及谷歌浏览器会输出 3X3 矩阵,而在 IE 及 Edge 输出 4X4 矩阵。
Transitionend 事件
transitionend 事件是在 transition 动画结束之后执行的函数。说到 transitionend 事件,我有很多感想。首先大家可以看一下我的 github 中的两个关于慕课网仿写 https://github.com/codrops/ScatteredPolaroidsGallery 的 DEMO,当卡片翻转过来,然后直接移动卡片,这时卡片是边移动边翻转,效果不理想。当初学这个 DEMO 的时候就研究了很久,没找到答案,直到现在也没做修改。直到写此插件才发现一切优化都要基于 transitionend 事件。
Chrome 中的 onresize 事件
关于该问题的详情及解决方法请参考 这篇文章 !
本文持续更新~
卡片抽奖插件 CardShow的更多相关文章
- 响应式卡片抽奖插件 CardShow
GitHub: https://github.com/nzbin/CardShow/ Demo: https://nzbin.github.io/CardShow/ 前言 这个小项目(卡片秀)是一个卡 ...
- jQuery抽奖插件 jQueryRotate
实现代码 网页中引用 <script type="text/javascript" src="js/jquery.min.js"></scri ...
- jquery抽奖插件+概率计算
写了一个抽奖的jquery插件和计算概率的方法, 结合起来就是一个简单的概率抽奖, 不过实际项目中基本不会把抽奖概率的计算放在前端处理~. demo lottery.jquery.js $.fn.ex ...
- js地区转盘抽奖插件
<script type="text/javascript"> var colors = ["#B8D430", "#3AB745&quo ...
- 拍案惊奇!9款神奇的jQuery/CSS3经典插件
款非常给力的jQuery/CSS3经典插件,插件包括CSS3图片特效.jQuery动画菜单.jQuery时尚登录表单等,一起来看看这些jQuery插件. .CSS3图片重力感应特效 这是一款应用重力感 ...
- php+lottery.js制作九宫格抽奖实例
php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...
- 推荐5个应用 jQuery 特效的精美特效
1.jQuery歌词同步的音乐播放器插件 精巧实用 之前我们分享过很多音乐播放器和视频播放器,很多播放器的UI界面都非常酷,特别是利用HTML5和CSS3实现的一些动画特效.今天要分享的一款基于jQu ...
- 九款酷炫基于jquery实现的应用及源码
1.HTML5 Loading动画加载 五彩的圆环Loading 今天我们要分享一款基于HTML5的Loading加载动画特效,这款HTML5加载动画是一个五彩的圆环,圆环不停地转动从而体现加载正在进 ...
- 【转】25个非常实用的jQuery/CSS3应用组件
今天分享25款功能十分强大的jQuery/CSS3应用插件,欢迎收藏. 1.jQuery水晶样式下拉导航 这是一款非常不错的jQuery多功能下拉菜单插件,菜单外观呈水晶样式,晶莹剔透,功能丰富,包含 ...
随机推荐
- Asp.net Boilerplate之AbpSession扩展
当前Abp版本1.2,项目类型为MVC5. 以属性的形式扩展AbpSession,并在"记住我"后,下次自动登录也能获取到扩展属性的值,版权归"角落的白板报"所 ...
- 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类)
前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...
- MVVM框架从WPF移植到UWP遇到的问题和解决方法
MVVM框架从WPF移植到UWP遇到的问题和解决方法 0x00 起因 这几天开始学习UWP了,之前有WPF经验,所以总体感觉还可以,看了一些基础概念和主题,写了几个测试程序,突然想起来了前一段时间在W ...
- nodejs之get/post请求的几种方式
最近一段时间在学习前端向服务器发送数据和请求数据,下面总结了一下向服务器发送请求用get和post的几种不同请求方式: 1.用form表单的方法:(1)get方法 前端代码: <form act ...
- 协议森林16 小美的桌号(DHCP协议)
作者:Vamei 出处:http://www.cnblogs.com/vamei 转载请先与我联系. DHCP协议用于动态的配置电脑的网络相关参数,如主机的IP地址,路由器出口地址.DNS域名服务器地 ...
- iOS开发之再探多线程编程:Grand Central Dispatch详解
Swift3.0相关代码已在github上更新.之前关于iOS开发多线程的内容发布过一篇博客,其中介绍了NSThread.操作队列以及GCD,介绍的不够深入.今天就以GCD为主题来全面的总结一下GCD ...
- 来吧,HTML5之基础标签(下)
<dialog> 标签 定义对话框或窗口. <dialog> 标签是 HTML 5 的新标签.目前只有 Chrome 和 Safari 6 支持 <dialog> ...
- ie6 ie7 ie8 ie9兼容问题终极解决方案
放下包袱,解决低版本兼容问题 这是一个老生常谈的问题,自然解决这个问题的方案也比较多,下面整理了一些解决方法: 1.强制使用高版本渲染模式. 强制使用Edge模式来解析网页代码 <meta ...
- android手机登录时遇到“QQ安全登录发现病毒”解决
android手机作为开源系统非常容易感染病毒,有时候我们会经常遇到手机QQ登录时检测到app被感染,一般情况是由手机感染病毒所引起的,安装腾讯管家后只能检测病毒和卸载感染病毒的软件,不能清除病毒.解 ...
- oracle常用的快捷键
最近在开发过程中,遇到一些麻烦,就是开发效率问题,有时候其他同事使用PLSQL 编程效率明显高于自己,观察了好久,才发现他使用PLSQL 已经很长时间了而且,他自己也在其中添加了好多快捷方式, 1.登 ...