jQuery自己写的抽奖数字小插件

jQuery自己写的抽奖数字小插件

添加时间:2021-03-22 16:13:34
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:翻盘
  • 模板颜色模板颜色:入门级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

本文的抽奖方法基于jQuery插件写法,想学如何写插件的朋友,可以多看看。你可以在defaluts里面加自己想要的参数。如何传参呢,$('.aa').lottery({imgWrap:"ul"})
jQuery自己写的抽奖数字小插件
分类:抽奖 > 翻盘 难易:入门级

从0到9不同的10个数字抽奖图片

<div class="scrollPic aa">
    <ul>
        <li><img src="pic/00.png" width="256" height="256" /></li>
        <li><img src="pic/01.png" width="256" height="256" /></li>
        <li><img src="pic/02.png" width="256" height="256" /></li>
        <li><img src="pic/03.png" width="256" height="256" /></li>
        <li><img src="pic/04.png" width="256" height="256" /></li>
        <li><img src="pic/05.png" width="256" height="256" /></li>
        <li><img src="pic/06.png" width="256" height="256" /></li>
        <li><img src="pic/07.png" width="256" height="256" /></li>
        <li><img src="pic/08.png" width="256" height="256" /></li>
        <li><img src="pic/09.png" width="256" height="256" /></li>
    </ul>
</div>

抽奖插件方法,defaults里面的参数可以自定义设置

$.fn.extend({
    lottery: function(options) {
        var defaults = {
            'imgWrap': 'ul',
            'imgBox': 'li'
        }
        var options = $.extend(defaults, options);
        var rand = function(Min, Max) {
            var Range = Max - Min;
            var Rand = Math.random();
            return(Min + Math.round(Rand * Range));
        }
        return this.each(function() {
            var imgBox = $(this).find(options.imgBox);
            var eachHeight = imgBox.outerHeight();
            var size = $(this).find(options.imgBox).size();
            var height = size * eachHeight;
            var imgWrap = $(this).find(options.imgWrap);
            imgWrap.height(height);
            imgWrap.css({'margin-top': 0});
            var scrollTop = 0;
            var index = 0;
            var round = 0;
            var lucky_num = rand(0, size - 1);
            var run = function() {
                index++;
                if (index == 1)
                    round++;
                if (round == 1) {
                    var speed = 300 - index * 30;
                } else if (round > 7) {
                    var speed = 300;
                } else {
                    var speed = 100;
                }
                if (round == 8 && index == (lucky_num + 1)) {
                    //alert(lucky_num);
                } else if (index == size) {
                    imgWrap.css({'margin-top': 0});
                    index = 0;
                    run();
                } else {
                    scrollTop = -eachHeight * index;
                    imgWrap.animate({'margin-top': scrollTop}, speed, false, run);
                }
            };
            run();
        });
    }
});

点击抽奖事件

<input type="button" value="开始抽奖" onclick="lottery();" />
function lottery(){
    $('.aa').lottery();
}
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:jQuery自己写的抽奖数字小插件

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.087141s