最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2016-01-30 19:05浏览(1631)

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

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery自己写的抽奖数字小插件
分类:抽奖 > 翻盘 难易:入门级
查看演示 下载资源 下载积分: 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
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2