幸运大抽奖

幸运大抽奖全新来袭，现在普遍的抽奖活动都是由flash开发的，然而，今天向大家展示由js实现的抽奖。早在2012年的时候写过一篇文章关于js抽奖的《javascript 抽奖》 。  

借助raphaeljs插件实现，官网：http://raphaeljs.com          中文文档： http://lab.julying.com/raphael-js/docs/                                  

幸运大抽奖已两种方式展现，一种是圆盘旋转（猎豹式），另一种是指针旋转（考拉式），实现抽奖三部曲。

第一部：绘制圆盘和指针。

var r = Raphael("test",300,300);
// 绘制圆盘
r.image("pan.jpg",0,0,300,300);
// 绘制指针
r.image("pointer.png",145,0,10,150);

 

第二部：圆盘旋转（猎豹式）。

btn.click(function(){
    // 清空中奖结果
    result.html("");  
    // 清空画布
    r.clear();
    // 重新绘制圆盘和指针
    pan = r.image(pic,0,0,300,300);
    r.image(pointer,145,0,10,150);
    // 选中角度
    var angle = -parseInt(Math.random()*3000+6000);
    // 中奖结果
    var tmp = Math.abs(parseInt(((angle-30)%360)/60))+1;
    pan.animate({transform: "r" + angle}, 1000, ">",function(){
         result.html("恭喜您获得"+tmp+"奖");
    });
});

 


第三部：指针旋转（考拉式）。

btn.click(function(){
    // 清空中奖结果
    result.html("");
    // 设置暂停、计数、角度、中奖结果
    var stop=null,
        index = 0,
        angle= parseInt(Math.random()*360),
        tmp =Math.abs(parseInt(((angle+30)%360)/60))+1;
    // 清空画布，重新绘制圆盘和指针
    r.clear();
    r.image(pic,0,0,300,300);
    point = r.image(pointer,145,0,10,150);
    // 中奖结果
    stop = setInterval(function(){
        index++;
        if(index>=angle){
            clearInterval(stop); 
            result.html("恭喜您获得"+tmp+"奖");
        }
        point.rotate(1,150,150);  
    },100);
});


用到raphaeljs中五个方法有image、animate、transform、rotate、clear，搞定。

生活版：抽奖圆盘式先加速中急速后减速的效果。感兴趣的朋友可以改进以上的代码，用到实际项目中。




DEMO：

posted @ 2014-03-30 18:11  前端咖  阅读(2620)  评论(7)  编辑  收藏  举报