帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» jQuery转盘游戏抽奖
jQuery转盘游戏抽奖
浏览:699次
-
评论:0次
-
发布时间:2018-06-09
Html
Css
Js
1
点我抽奖
中奖者为"
"号
1
点我抽奖
中奖者为"
"号
* { margin:0; padding:0; } a { text-decoration:none; } img { border:none; } li { list-style:none outside none; } body { background:#c9c9c9; font-size:14px; font-family:"宋体"; } .myBox { margin:50px auto 0; } .myBox ul { margin:0 auto 0; position:relative; width:500px; height:100px; overflow:hidden; } .myBox li { width:100px; height:100px; text-align:center; line-height:100px; font-size:40px; color:#fff; background:rgba(222,122,155,0.5); } .myBox li.on { background:rgba(66,56,222,0.5); } .text { height:50px; overflow:hidden; width:500px; margin:20px auto 0; font-size:20px; line-height:50px; text-align:center; } .bt,.jg,.zt { float:left; width:200px; } .bt { width:100px; height:50px; background:rgb(200,100,55); color:#fff; cursor:pointer; } em { font-size:30px; font-style:normal; color:red; }
;(function($, window, document, undefined) { var LuckDraw = function(ele, opt) { this.$element = ele, this.defaults = { row: 4, //行 column: 4, //列 spacing: 0, click: null, time: 3, end: function(e) {} }, this.target, this.options = $.extend({}, this.defaults, opt); } LuckDraw.prototype = { init: function() { var $this = this.$element; var row = this.options.row; var col = this.options.column; var spacing = this.options.spacing; var click = this.options.click; var allNumber = 2 * (row + col) - 4; var line = row - 2; //除去上下de行数 var length = $this.children('li').length; var options = this.options; if (length < allNumber) { for (var i = length; i <= (allNumber - length); i++) { $this.append("
" + (i + 1) + "
"); } } var children = $this.children('li'); var width = children.eq(0).width() || 0; var height = children.eq(0).height() || 0; //元素初始化 $this.css({ position: 'relative', width: col * width + (col - 1) * spacing, height: row * height + (row - 1) * spacing }); children.css({ position: 'absolute' }); if (line == 0) { initOne(); } else { initTwo(); } //初始化函数 //此时分成4个部分,上、右、下、左 //上: 0 ~ col-1 //右: col ~ col+line //下: col+line+1 ~ 2*col+line-1 //左: else //如果只有两行 //此时分成4个部分,上、右、下、左 function initOne() { children.each(function(index) { if (index >= 0 && index <= (col - 1)) { $(this).css({ top: 0, left: index * width + index * spacing }); } else { $(this).css({ bottom: 0, right: index % col * width }); } }); } //如果大于两行 function initTwo() { children.each(function(index) { if (index >= 0 && index <= (col - 1)) { $(this).css({ top: 0, left: index * width + index * spacing }); } else if (index >= col && index <= (col + line - 1)) { $(this).css({ top: ((index + 1 - col)) * (height + spacing), right: 0 }); } else if (index >= (col + line) && index <= (2 * col + line - 1)) { $(this).css({ bottom: 0, right: (index - ((col + line))) * (width + spacing) }); } else { $(this).css({ left: 0, bottom: (index - (2 * col + line - 1)) * (height + spacing) }); } }); } var target = $this.target || Math.floor(Math.random() * allNumber + 1); //目标,指定或随机 var ix = 0; //位置 var stop; var flg = false; //抽奖是否正在运行 /* 加速度公式 v1 = v0 + a*t;注意加速度的v代表时间 此时的t可以我们自己定义,所以是常量,所以只需要求a的值 */ var a = -25.0; var v0 = 500.0; var t = 0.0, v; var time = this.options.time * 1000; //匀速运行的时间,单位秒 $(click).on('click', function() { if (!flg) { flg = true; target = $this.target || Math.floor(Math.random() * allNumber + 1); speedUp(); } else { return; } }); //加速 function speedUp() { runner(ix); if (v <= 50) { clearTimeout(stop); v = 50; t = 0.0; uniform(); //跳转到匀速 } else { t++; v = v0 + a * t; stop = setTimeout(speedUp, v); } } //匀速 function uniform() { stop = setTimeout(uniform, v); if (t == time / 50) { clearTimeout(stop); t = 0.0; speedDown(); } else { t++; } runner(ix); } //减速 function speedDown() { var stop3 = setTimeout(speedDown, v); if (v >= 500) { v = 500; if (ix == target - 1) { clearTimeout(stop3); options.end(target); flg = false; } } else { t++; v = v - a * t; } runner(ix); } //ix++ function runner(i) { children.removeClass('on').eq(ix).addClass('on'); i++; if (i == allNumber) { ix = 0; } else { ix = i; } } }, setTarget: function(options) { var $this = this.$element; $this.target = options; } } $.fn.myLuckDraw = function(options, target) { var Ld = new LuckDraw(this, options); Ld.setTarget(target); Ld.init(); return this; } })(jQuery, window, document); $(function() { var tar = 5; $('.cj1').myLuckDraw({ row: 4, //行 column: 4, //列 spacing: 5, //空隙 click: '.bt1', //点击触发 time: 3, //匀速运动的时间 end: function(e) { //抽奖执行完毕的回调函数,参数e为获奖编号 //因为这里是指定的,所以e == 12 $('.jg1 em').text(e); } }, tar); //这里tar是确定想要抽奖的目标是几号 $('.cj2').myLuckDraw({ row: 3, //行 column: 5, //列 spacing: 5, //空隙 click: '.bt2', //点击触发 time: 3, //匀速运动的时间 end: function(e) { //抽奖执行完毕的回调函数,参数e为获奖编号 //因为这里是指定的,所以e == 12 $('.jg2 em').text(e); } }); });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>jQuery转盘游戏抽奖-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:jquery开发转盘抽奖
转盘抽奖 可修改 谢谢
判断下拉框的值是否重复,重复则清空
input输入内容字体和placeholder字体样式
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
699
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值