zoukankan      html  css  js  c++  java
  • jQueryRotate 转盘抽奖代码实现

    代码如下:

    例子兼容IE6,7,8 以及高版本浏览器,如有bug请回复!

    1、html结构

    <!doctype html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title></title>
        <style>
            .box{width:503px;height:525px;background:url(zhuanpan.png) no-repeat;position:relative;margin:0 auto;}
            #rotate{width:121px;height:160px;position:absolute;top:176px;left:193px;border:none;cursor:pointer;}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="lottery-star">
                <img src="start.png" id="rotate">
            </div>
        </div>
    </body>
    </html>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jQueryRotate.js"></script>
    <script type="text/javascript" src="jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="index.js"></script>

    2、index.js主要代码

    /*
        为了页面兼容IE6.7.8 页面指针必须采用image标签插入
        例如代码:外面的div可以不要
        <div class="lottery-star">
            <img src="start.png" id="rotate">
        </div>
    */
    var lottery = {
        /*
            转盘配置位置
            0、obj 需要转动的指针对象【必选】
            1、angle 角度设计 代表每个区域所属角度范围 【可选】
            2、num 奖项的数量【必选】 如果没有设置angle 则表示每个盘子平均分配
            3、offsetAlw容差范围 默认为2 指针偏向区域内的位置,防止进入边界【可选】
            4、duration 转盘转动时间 默认为5s【可选】
            5、turnNum 转动的圈数 默认为5圈【可选】
            6、parmIndex 中奖编号的参数名称【必选】
            7、parmText 中奖编号对应的奖品名称参数【必选】
            例如:
            lottery.config = {
                'obj':".rotate",
                'angle':[[0,45],[45,120],[120,160],[160,240],[240,300],[300,360]],
                'num':6,
                'offsetAlw':3,
                'duration':1000,
                'turnNum':1,
                'parmIndex':'index',
                'parmText':'text'
            }
        */
        config:{
            'obj':null,
            'num':0,
            'parmIndex':'',
            'parmText':''
        },
        /*
            获取元素的绝对位置,及宽度高度属性
            element     dom元素
        */
        getpos:function(element){
            if ( arguments.length != 1 || element == null ) { 
                return null; 
            } 
            var offsetTop = element.offsetTop; 
            var offsetLeft = element.offsetLeft; 
            var offsetWidth = element.offsetWidth; 
            var offsetHeight = element.offsetHeight; 
            while( element = element.offsetParent ) { 
                offsetTop += element.offsetTop; 
                offsetLeft += element.offsetLeft; 
            }
            return { absoluteTop: offsetTop, absoluteLeft: offsetLeft, 
                offsetWidth: offsetWidth, offsetHeight: offsetHeight }; 
        },
        /*
            创建遮罩层
        */
        createHov:function(){
            var box = $(this.config['obj'])[0];
            var pos = this.getpos(box);
            var div = document.createElement('div');
            div.id = 'pos_h_cread';
            div.style.position = 'absolute';
            div.style.zIndex = 9999999;
            div.style.left = (pos.absoluteLeft - 25) + 'px';
            div.style.top = (pos.absoluteTop - 25) + 'px';
            div.style.width = (pos.offsetWidth + 50) + 'px';
            div.style.height = (pos.offsetHeight + 50) + 'px';
            document.getElementsByTagName("body")[0].appendChild(div);
        },
        /*
            删除遮罩层
        */
        removeHov:function(){
            var n = document.getElementById('pos_h_cread');
            if(n && n.parentNode && n.tagName != 'BODY'){  
                n.parentNode.removeChild(n);  
            }  
        },
        /*
        * 获取2个值之间的随机数
        * smin 数值的下限
        * smax 数值的上限
        */
        randomnum:function(smin, smax) {
            var Range = smax - smin;
            var Rand = Math.random();
            return (smin + Math.round(Rand * Range));
        },
        /*
        *
        * 计算转盘角度生成随机的角度返回给转盘
        * jsons:奖励对应的json数据
        * num:奖励的数量
        * 
        */
        runzp:function(jsons,num) {
            var data = '[{"prize":"'+ jsons[this.config['parmText']] +'","v":100.0}]';
            var obj = $.parseJSON(data);
            var result = this.randomnum(1, 100);
            var line = 0;
            var temp = 0;
            var returnobj = "0";
            var index = 0;
            for (var i = 0; i < obj.length; i++) {
                var obj2 = obj[i];
                var c = parseFloat(obj2.v);
                temp = temp + c;
                line = 100 - temp;
                if (c != 0) {
                    if (result > line && result <= (line + c)) {
                        index = parseInt(jsons[this.config['parmIndex']]);
                        returnobj = obj2;
                        break;
                    }
                }
            }
            var angle = 330;//角度为330
            var myreturn = new Object;
            if (returnobj != "0") {// 有奖
                var anglearr = [];//奖品角度设置
                if(!!this.config.angle){
                    anglearr = this.config.angle;
                }else{
                    for(var i = 0;i < num;i++){
                        var baseAngle = 360/num;//基础角度
                        anglearr[i] = [baseAngle*i,baseAngle*(i+1)];
                    }
                }
                if(index != 0){
                    var r = this.randomnum(anglearr[index-1][0] + this.config['offsetAlw'], anglearr[index-1][1] - this.config['offsetAlw']);//随机产生中奖奖区间的位置角度
                    angle = r;
                }
                myreturn.prize = returnobj.prize;//返回奖励名称
            } else {
                this.error();
            }
            myreturn.angle = angle;
            return myreturn;
        },
        /*
        * 指针转动方法
        * obj:json数据,中奖的信息参数
        * callback:回调函数
        */
        zhenscroll:function(obj,callback){
            this.createHov();
            var a = this.runzp(obj,this.config['num']);//返回计算过的对象
            var durationT = !!this.config['duration'] ? this.config['duration'] : 5000;
            var turnNum = !!this.config['turnNum'] ? this.config['turnNum'] : 5;
            $(this.config['obj']).stopRotate();
            $(this.config['obj']).rotate({
                duration:durationT,  //转动时间
                angle: 0,                    //起始角度
                animateTo:turnNum*360 + a.angle,      //结束的角度
                easing: $.easing.easeOutSine,//动画效果,需加载jquery.easing.min.js
                callback: function(){
                    lottery.removeHov();
                    //转盘结束后回调位置
                    if(callback){
                        callback();
                    }
                }
            });
        },
        /*
            开始执行
            fn:执行函数
        */
        start:function(fn){
            $(this.config['obj']).rotate({
                bind:{
                    click:function(){
                        if(fn){fn();}
                    }
                }
            });
        },
        error:function(){
            alert('抽奖失败!');
        }
    };
    //配置参数
    lottery.config = {
            'obj':'#rotate',
            'angle':[[0,60],[60,120],[120,180],[180,240],[240,300],[300,360]],
            'num':6,
            'offsetAlw':3,
            'duration':5000,
            'turnNum':5,
            'parmIndex':'index',
            'parmText':'text'
    }
    function ajaxG(){
        var result = null;
        $.ajax({
           type: 'GET',
           url: 'reword.php',
           data: '',
           async:false,
           dataType:'json',
           error:function(){
                alert('抽奖失败');
           },
           success: function(data){
                result = data;
           }
        });
        return result;
    }
    $(function(){
        lottery.start(function(){
            var s = ajaxG();
            var index = s.reward;//奖品编号
            var text = s.text;//奖品名称
            var obj = '{"'+ lottery.config['parmIndex']  +'":'+ index +',"'+ lottery.config['parmText'] +'":"'+ text +'"}';
            obj = $.parseJSON(obj);
            lottery.zhenscroll(obj,function(){
                alert(text);
            });
        });
    });

     优化代码:

    /*
        为了页面兼容IE6.7.8 页面指针必须采用image标签插入
        例如代码:外面的div可以不要
        <div class="lottery-star">
            <img src="start.png" id="rotate">
        </div>
    */
    var lottery = {
        /*
            转盘配置位置
            0、obj 需要转动的指针对象【必选】
            1、angle 角度设计 代表每个区域所属角度范围 【可选】
            2、num 奖项的数量【必选】 如果没有设置angle 则表示每个盘子平均分配
            3、offsetAlw容差范围 默认为2 指针偏向区域内的位置,防止进入边界【可选】
            4、duration 转盘转动时间 默认为5s【可选】
            5、turnNum 转动的圈数 默认为5圈【可选】
            6、parmIndex 中奖编号的参数名称【必选】
            7、parmText 中奖编号对应的奖品名称参数【必选】
            例如:
            lottery.config = {
                'obj':".rotate",
                'angle':[[0,45],[45,120],[120,160],[160,240],[240,300],[300,360]],
                'num':6,
                'offsetAlw':3,
                'duration':1000,
                'turnNum':1,
                'parmIndex':'index',
                'parmText':'text'
            }
        */
        config:{
            'obj':null,
            'num':0,
            'parmIndex':'',
            'parmText':''
        },
        /*
            转动开关
        */
        switchW:true,
        /*
        * 获取2个值之间的随机数
        * smin 数值的下限
        * smax 数值的上限
        */
        randomnum:function(smin, smax) {
            var Range = smax - smin;
            var Rand = Math.random();
            return (smin + Math.round(Rand * Range));
        },
        /*
        *
        * 计算转盘角度生成随机的角度返回给转盘
        * jsons:奖励对应的json数据
        * num:奖励的数量
        * 
        */
        runzp:function(jsons,num) {
            var data = '[{"prize":"'+ jsons[this.config['parmText']] +'","v":100.0}]';
            var obj = $.parseJSON(data);
            var result = this.randomnum(1, 100);
            var line = 0;
            var temp = 0;
            var returnobj = "0";
            var index = 0;
            for (var i = 0; i < obj.length; i++) {
                var obj2 = obj[i];
                var c = parseFloat(obj2.v);
                temp = temp + c;
                line = 100 - temp;
                if (c != 0) {
                    if (result > line && result <= (line + c)) {
                        index = parseInt(jsons[this.config['parmIndex']]);
                        returnobj = obj2;
                        break;
                    }
                }
            }
            var angle = 330;//角度为330
            var myreturn = new Object;
            if (returnobj != "0") {// 有奖
                var anglearr = [];//奖品角度设置
                if(!!this.config.angle){
                    anglearr = this.config.angle;
                }else{
                    for(var i = 0;i < num;i++){
                        var baseAngle = 360/num;//基础角度
                        anglearr[i] = [baseAngle*i,baseAngle*(i+1)];
                    }
                }
                if(index != 0){
                    var r = this.randomnum(anglearr[index-1][0] + this.config['offsetAlw'], anglearr[index-1][1] - this.config['offsetAlw']);//随机产生中奖奖区间的位置角度
                    angle = r;
                }
                myreturn.prize = returnobj.prize;//返回奖励名称
            } else {
                this.error();
            }
            myreturn.angle = angle;
            return myreturn;
        },
        /*
        * 指针转动方法
        * obj:json数据,中奖的信息参数
        * callback:回调函数
        */
        zhenscroll:function(obj,callback){
            var a = this.runzp(obj,this.config['num']);//返回计算过的对象
            var durationT = !!this.config['duration'] ? this.config['duration'] : 5000;
            var turnNum = !!this.config['turnNum'] ? this.config['turnNum'] : 5;
            $(this.config['obj']).stopRotate();
            $(this.config['obj']).rotate({
                duration:durationT,  //转动时间
                angle: 0,                    //起始角度
                animateTo:turnNum*360 + a.angle,      //结束的角度
                easing: $.easing.easeOutSine,//动画效果,需加载jquery.easing.min.js
                callback: function(){
                    lottery.switchW = true;
                    //转盘结束后回调位置
                    if(callback){
                        callback();
                    }
                }
            });
        },
        /*
            开始执行
            fn:执行函数
        */
        start:function(fn){
            $(this.config['obj']).rotate({
                bind:{
                    click:function(){
                        if(fn){fn();}
                    }
                }
            });
        },
        error:function(){
            alert('抽奖失败!');
        }
    };
    //配置参数
    lottery.config = {
            'obj':'#rotate',
            'angle':[[0,60],[60,120],[120,180],[180,240],[240,300],[300,360]],
            'num':6,
            'offsetAlw':3,
            'duration':5000,
            'turnNum':5,
            'parmIndex':'index',
            'parmText':'text'
    }
    function ajaxG(){
        var result = null;
        $.ajax({
           type: 'GET',
           url: 'reword.php',
           data: '',
           async:false,
           dataType:'json',
           error:function(){
                alert('抽奖失败');
           },
           success: function(data){
                result = data;
           }
        });
        return result;
    }
    $(function(){
        lottery.start(function(){
            if(!lottery.switchW){return true;}
            else{
                lottery.switchW = false;
                var s = ajaxG();
                var index = s.reward;//奖品编号
                var text = s.text;//奖品名称
                var obj = '{"'+ lottery.config['parmIndex']  +'":'+ index +',"'+ lottery.config['parmText'] +'":"'+ text +'"}';
                obj = $.parseJSON(obj);
                lottery.zhenscroll(obj,function(){
                    alert(text);
                });
            }
        });
    });
  • 相关阅读:
    数据库DQL(Data Query Language)语言学习之三:排序查询
    数据库DQL(Data Query Language)语言学习之二:条件查询
    MySQL中的通配符
    SQL查询文档网站
    python之特殊方法
    java之静态函数和静态变量
    java之类和对象
    python之类的继承
    python的面向对象编程
    python之模块(在命令行当中使用pip install 模块来进行模块的安装)
  • 原文地址:https://www.cnblogs.com/shizhouyu/p/5099510.html
Copyright © 2011-2022 走看看