1. 自营销首页
  2. 文档

jQuery实现幸运大转盘(php抽奖程序)抽奖程序

抽奖程序有各式各样的形式,其中幸运大转盘最为常见。线上线下都有很多的使用场景。

本文结合我自己的php网站,是实现一个php抽奖程序。

下图是该抽奖程序的截图:

jQuery实现幸运大转盘(php抽奖程序)抽奖程序

一般的抽奖程序主要是算法程序,界面效果并不重要。算法一般都是后台实现的,前台毕竟是不安全的。

前台只需要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片。根据后台的数据进行效果展示即可。

下面是全部实现代码:

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8″>

<title>幸运大转盘-jQuery+PHP实现的抽奖程序</title>

<link rel=”stylesheet” type=”text/css” href=”../css/main.css” />

<style type=”text/css”>

.demo{width:417px; height:417px; position:relative; margin:50px auto}

#disk{width:417px; height:417px; background:url(disk.jpg) no-repeat}

#start{width:163px; height:320px; position:absolute; top:46px; left:130px;}

#start img{cursor:pointer}

</style>

<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

<script type=”text/javascript” src=”jQueryRotate.2.2.js”></script>

<script type=”text/javascript” src=”jquery.easing.min.js”></script>

<script type=”text/javascript”>

$(function(){

    $(“#startbtn”).rotate({

        bind:{

            click:function(){

                var a = Math.floor(Math.random() * 360);

                 $(this).rotate({

                        duration:3000,

                        angle: 0,

                        animateTo:1440+a,

                        easing: $.easing.easeOutSine,

                        callback: function(){

                            alert(‘中奖了!’);

                        }

                 });

            }

        }

    });

});

</script>

</head>

<body>

<div id=”main”>

   <h2 class=”top_title”>业余草,www.xttblog.com</h2>

   <div class=”msg”></div>

   <div class=”demo”>

        <div id=”disk”></div>

        <div id=”start”><img src=”start.png” id=”startbtn”></div>

   </div>

</div>

</body>

</html>

本实例中借助了jQueryRotatejquery.easing两个插件。

来源:悦码,本文观点不代表自营销立场,网址:https://www.zyxiao.com/p/85664

发表评论

电子邮件地址不会被公开。 必填项已用*标注

侵权联系
分享本页
返回顶部