最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 二当家的 2016-01-30 19:05浏览(1540)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery自己写的抽奖数字小插件
分类:抽奖 > 翻盘 难易:入门级
查看演示 下载资源: 114

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

从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();
}
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/722.html
评论0
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

1 2