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

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

淘建站为您提供更多_其它特效_抽奖_抽奖_数字，在此特别感谢您对我们的支持与厚爱！

从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();
}