添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 网页特效 > 漂浮 | 广告 >

转盘抽奖-jQuery+PHP实现的抽奖程序

时间:2014-05-05      来源:互联网     
特效说明:
一转盘抽奖-jQuery+PHP实现的抽奖程序网页特效,带jQuery+PHP实例代码,兼容IE6、IE7浏览器,运行流畅,幸运大抽奖活动素材特效。(兼容测试:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)
使用方法:
1、调用CSS样式:
<link href="css/style.css" rel="stylesheet" type="text/css">

2、调用JS插件代码:
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="js/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('中奖了!'+a);
                            
                        }
                 });
            }
        }
    });
});

3、添加HTML代码:
<!--效果html开始-->......<!--效果html结束-->之间的html和js代码;放在<body></body>之间。

4.PHP实例代码:
<!--需要服务端php运行环境-->
/*$(function(){
     $("#startbtn").click(function(){
        lottery();
    });
});
function lottery(){
    $.ajax({
        type: 'POST',
        url: 'data.php',
        dataType: 'json',
        cache: false,
        error: function(){
            alert('出错了!');
            return false;
        },
        success:function(json){
            $("#startbtn").unbind('click').css("cursor","default");
            var a = json.angle; //角度
            var p = json.prize; //奖项
            $("#startbtn").rotate({
                duration:3000, //转动时间
                angle: 0,
                animateTo:1800+a, //转动角度
                easing: $.easing.easeOutSine,
                callback: function(){
                    var con = confirm('恭喜你,中得'+p+'\n还要再来一次吗?');
                    if(con){
                        lottery();
                    }else{
                        return false;
                    }
                }
            });
        }
    });
} */
相关特效
  • jQuery过滤器插件fastLiveFilter

    jQuery过滤器插件fastLiveFilter

    一款jQuery过滤器插件fastLiveFilter免费代码素材,fastLiveFilter这是jQuery过滤器插件,超轻量级(大小只有2K),用法简单执行效率高。……
    2016-05-22
  • jQuery图片图像对比插件coveringBad.js特效Demo

    jQuery图片图像对比插件coveringBad.js特效Demo

    一款jQuery图片图像对比查看差异coveringBad.js网页特效插件,通过鼠标拖拽按钮查看当前图像与背景图像差异jQuery插件,婚纱摄影网站建设图片对比插件。……
    2016-05-22
  • jQuery仿QQ音乐大转盘抽奖代码

    jQuery仿QQ音乐大转盘抽奖代码

    一款jQuery仿QQ音乐大转盘抽奖代码页特效,绿色12等份网格幸运大转盘抽奖程序JS代码下载。……
    2015-08-22
  • 自定义百度分享URL以及图标样式JS代码

    自定义百度分享URL以及图标样式JS代码

    一款自定义百度分享URL以及图标样式JS代码网页特效,可以应用于响应式网页制作、微信网页制作分享代码。……
    2015-08-21
  • 如何自定义百度分享URL以及图标?

    如何自定义百度分享URL以及图标?

    一款自定义百度分享URL以及图标样式JS代码网页特效,可以应用于响应式网页制作、微信网页制作分享代码。……
    2015-08-21
  • jQuery点击空白处隐藏弹出层

    jQuery点击空白处隐藏弹出层

    一款jQuery点击空白处隐藏弹出层网页特效,点击按钮弹出层、点击页面空白处弹出层消失JS代码。……
    2015-08-20
  • jQuery鼠标点击图片透明渐变翻开切换焦点图

    jQuery鼠标点击图片透明渐变翻开切换焦点图

    一款jQuery鼠标点击图片透明渐变翻开切换焦点图网页特效,鼠标点击图片向上移动渐变消失切换图片,带自动轮播、页码标识JS焦点图代码。……
    2015-08-03
  • HTML5+Canvas制作微信大转盘抽奖特效

    HTML5+Canvas制作微信大转盘抽奖特效

    一款HTML5+Canvas制作微信大转盘抽奖网页特效,该HTML5特效采用响应式布局制作旋转大转盘抽奖程序,移动端网页制作必备代码素材。……
    2015-07-30
  • JS鼠标滚动滚轮横向水平滚动网页特效

    JS鼠标滚动滚轮横向水平滚动网页特效

    一款JS鼠标滚动滚轮横向水平滚动网页特效,一般情况滚动滚轮上下查看网页内容,该特效代码为鼠标滚动滚轮左右横向滚动条滚动预览内容js代码。……
    2015-07-28
  • jQuery仿flash动画图文排版翻书特效

    jQuery仿flash动画图文排版翻书特效

    一款jQuery仿flash动画翻书特效免费下载,该翻书JS特效是一款功能强大的响应式书本翻页动画特效,可拖动各书角或者点击目录进行翻页。……
    2015-05-06

最新更新特效

设计分享