java小项目 幸运大抽奖_[Java教程]幸运大抽奖

[Java教程]幸运大抽奖

0 2014-03-30 19:00:09

幸运大抽奖全新来袭，现在普遍的抽奖活动都是由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，搞定。生活版：抽奖圆盘式先加速中急速后减速的效果。感兴趣的朋友可以改进以上的代码，用到实际项目中。

备注：本人现寻求一份前端工作，QQ：1173290990。(父母在不远游，游必有方)

DEMO：

幸运大抽奖

幸运大抽奖

================圆盘转动(猎豹式)================

================指针转动(考拉式)================

运行代码

本文网址：http://www.shaoqun.com/a/87261.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

0