zoukankan      html  css  js  c++  java
  • jQuery转盘插件rotate

    css

    .rotate{
        background:#aaa;
        padding:100px;
        position: relative;
    }
    .point {
        position: absolute;
        top: 215px;
        left: 270px;
        width: 149px;
        height: 200px;
        background: url(http://fundact.eastmoney.com/app4/images/luckyPoint.png) no-repeat;
    }
    .luckyBtn{
        position: absolute;
        top: 286px;
        left: 288px;
        cursor: pointer;
        width: 109px;
        height: 109px;
        background: url(http://fundact.eastmoney.com/app4/images/luckyBtn.png) no-repeat;
    }

    html

    <div class="rotate">
        <img id="rotate" src="http://fundact.eastmoney.com/app4/images/luckyDish.png" />
        <span class="point"></span>
        <span id="luckyBtn" class="luckyBtn"></span>
    </div>

    jquery.easing.min.js

    jQuery.easing.jswing=jQuery.easing.swing;
    jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,a,c,b,d){return jQuery.easing[jQuery.easing.def](e,a,c,b,d)},easeInQuad:function(e,a,c,b,d){return b*(a/=d)*a+c},easeOutQuad:function(e,a,c,b,d){return-b*(a/=d)*(a-2)+c},easeInOutQuad:function(e,a,c,b,d){if((a/=d/2)<1)return b/2*a*a+c;return-b/2*(--a*(a-2)-1)+c},easeInCubic:function(e,a,c,b,d){return b*(a/=d)*a*a+c},easeOutCubic:function(e,a,c,b,d){return b*((a=a/d-1)*a*a+1)+c},easeInOutCubic:function(e,a,c,b,d){if((a/=d/2)<1)return b/
    2*a*a*a+c;return b/2*((a-=2)*a*a+2)+c},easeInQuart:function(e,a,c,b,d){return b*(a/=d)*a*a*a+c},easeOutQuart:function(e,a,c,b,d){return-b*((a=a/d-1)*a*a*a-1)+c},easeInOutQuart:function(e,a,c,b,d){if((a/=d/2)<1)return b/2*a*a*a*a+c;return-b/2*((a-=2)*a*a*a-2)+c},easeInQuint:function(e,a,c,b,d){return b*(a/=d)*a*a*a*a+c},easeOutQuint:function(e,a,c,b,d){return b*((a=a/d-1)*a*a*a*a+1)+c},easeInOutQuint:function(e,a,c,b,d){if((a/=d/2)<1)return b/2*a*a*a*a*a+c;return b/2*((a-=2)*a*a*a*a+2)+c},easeInSine:function(e,
    a,c,b,d){return-b*Math.cos(a/d*(Math.PI/2))+b+c},easeOutSine:function(e,a,c,b,d){return b*Math.sin(a/d*(Math.PI/2))+c},easeInOutSine:function(e,a,c,b,d){return-b/2*(Math.cos(Math.PI*a/d)-1)+c},easeInExpo:function(e,a,c,b,d){return a==0?c:b*Math.pow(2,10*(a/d-1))+c},easeOutExpo:function(e,a,c,b,d){return a==d?c+b:b*(-Math.pow(2,-10*a/d)+1)+c},easeInOutExpo:function(e,a,c,b,d){if(a==0)return c;if(a==d)return c+b;if((a/=d/2)<1)return b/2*Math.pow(2,10*(a-1))+c;return b/2*(-Math.pow(2,-10*--a)+2)+c},
    easeInCirc:function(e,a,c,b,d){return-b*(Math.sqrt(1-(a/=d)*a)-1)+c},easeOutCirc:function(e,a,c,b,d){return b*Math.sqrt(1-(a=a/d-1)*a)+c},easeInOutCirc:function(e,a,c,b,d){if((a/=d/2)<1)return-b/2*(Math.sqrt(1-a*a)-1)+c;return b/2*(Math.sqrt(1-(a-=2)*a)+1)+c},easeInElastic:function(e,a,c,b,d){e=1.70158;var f=0,g=b;if(a==0)return c;if((a/=d)==1)return c+b;f||(f=d*0.3);if(g<Math.abs(b)){g=b;e=f/4}else e=f/(2*Math.PI)*Math.asin(b/g);return-(g*Math.pow(2,10*(a-=1))*Math.sin((a*d-e)*2*Math.PI/f))+c},easeOutElastic:function(e,
    a,c,b,d){e=1.70158;var f=0,g=b;if(a==0)return c;if((a/=d)==1)return c+b;f||(f=d*0.3);if(g<Math.abs(b)){g=b;e=f/4}else e=f/(2*Math.PI)*Math.asin(b/g);return g*Math.pow(2,-10*a)*Math.sin((a*d-e)*2*Math.PI/f)+b+c},easeInOutElastic:function(e,a,c,b,d){e=1.70158;var f=0,g=b;if(a==0)return c;if((a/=d/2)==2)return c+b;f||(f=d*0.3*1.5);if(g<Math.abs(b)){g=b;e=f/4}else e=f/(2*Math.PI)*Math.asin(b/g);if(a<1)return-0.5*g*Math.pow(2,10*(a-=1))*Math.sin((a*d-e)*2*Math.PI/f)+c;return g*Math.pow(2,-10*(a-=1))*Math.sin((a*
    d-e)*2*Math.PI/f)*0.5+b+c},easeInBack:function(e,a,c,b,d,f){if(f==undefined)f=1.70158;return b*(a/=d)*a*((f+1)*a-f)+c},easeOutBack:function(e,a,c,b,d,f){if(f==undefined)f=1.70158;return b*((a=a/d-1)*a*((f+1)*a+f)+1)+c},easeInOutBack:function(e,a,c,b,d,f){if(f==undefined)f=1.70158;if((a/=d/2)<1)return b/2*a*a*(((f*=1.525)+1)*a-f)+c;return b/2*((a-=2)*a*(((f*=1.525)+1)*a+f)+2)+c},easeInBounce:function(e,a,c,b,d){return b-jQuery.easing.easeOutBounce(e,d-a,0,b,d)+c},easeOutBounce:function(e,a,c,b,d){return(a/=
    d)<1/2.75?b*7.5625*a*a+c:a<2/2.75?b*(7.5625*(a-=1.5/2.75)*a+0.75)+c:a<2.5/2.75?b*(7.5625*(a-=2.25/2.75)*a+0.9375)+c:b*(7.5625*(a-=2.625/2.75)*a+0.984375)+c},easeInOutBounce:function(e,a,c,b,d){if(a<d/2)return jQuery.easing.easeInBounce(e,a*2,0,b,d)*0.5+c;return jQuery.easing.easeOutBounce(e,a*2-d,0,b,d)*0.5+b*0.5+c}});
    View Code

    jQueryRotate.2.2.js

    // VERSION: 2.2 LAST UPDATE: 13.03.2012
    /* 
     * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
     * 
     * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009
     * Website: http://code.google.com/p/jqueryrotate/ 
     */
    
    // Documentation removed from script file (was kinda useless and outdated)
    
    (function($) {
    var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");
    for (var a=0;a<toCheck.length;a++) if (styles[toCheck[a]] !== undefined) supportedCSS = toCheck[a];
    // Bad eval to preven google closure to remove it from code o_O
    // After compresion replace it back to var IE = 'v' == 'v'
    var IE = eval('"v"=="v"');
    
    jQuery.fn.extend({
        rotate:function(parameters)
        {
            if (this.length===0||typeof parameters=="undefined") return;
                if (typeof parameters=="number") parameters={angle:parameters};
            var returned=[];
            for (var i=0,i0=this.length;i<i0;i++)
                {
                    var element=this.get(i);    
                    if (!element.Wilq32 || !element.Wilq32.PhotoEffect) {
    
                        var paramClone = $.extend(true, {}, parameters); 
                        var newRotObject = new Wilq32.PhotoEffect(element,paramClone)._rootObj;
    
                        returned.push($(newRotObject));
                    }
                    else {
                        element.Wilq32.PhotoEffect._handleRotation(parameters);
                    }
                }
                return returned;
        },
        getRotateAngle: function(){
            var ret = [];
            for (var i=0,i0=this.length;i<i0;i++)
                {
                    var element=this.get(i);    
                    if (element.Wilq32 && element.Wilq32.PhotoEffect) {
                        ret[i] = element.Wilq32.PhotoEffect._angle;
                    }
                }
                return ret;
        },
        stopRotate: function(){
            for (var i=0,i0=this.length;i<i0;i++)
                {
                    var element=this.get(i);    
                    if (element.Wilq32 && element.Wilq32.PhotoEffect) {
                        clearTimeout(element.Wilq32.PhotoEffect._timer);
                    }
                }
        }
    });
    
    // Library agnostic interface
    
    Wilq32=window.Wilq32||{};
    Wilq32.PhotoEffect=(function(){
    
        if (supportedCSS) {
            return function(img,parameters){
                img.Wilq32 = {
                    PhotoEffect: this
                };
                
                this._img = this._rootObj = this._eventObj = img;
                this._handleRotation(parameters);
            }
        } else {
            return function(img,parameters) {
                // Make sure that class and id are also copied - just in case you would like to refeer to an newly created object
                this._img = img;
    
                this._rootObj=document.createElement('span');
                this._rootObj.style.display="inline-block";
                this._rootObj.Wilq32 = 
                    {
                        PhotoEffect: this
                    };
                img.parentNode.insertBefore(this._rootObj,img);
                
                if (img.complete) {
                    this._Loader(parameters);
                } else {
                    var self=this;
                    // TODO: Remove jQuery dependency
                    jQuery(this._img).bind("load", function()
                    {
                        self._Loader(parameters);
                    });
                }
            }
        }
    })();
    
    Wilq32.PhotoEffect.prototype={
        _setupParameters : function (parameters){
            this._parameters = this._parameters || {};
            if (typeof this._angle !== "number") this._angle = 0 ;
            if (typeof parameters.angle==="number") this._angle = parameters.angle;
            this._parameters.animateTo = (typeof parameters.animateTo==="number") ? (parameters.animateTo) : (this._angle); 
    
            this._parameters.step = parameters.step || this._parameters.step || null;
            this._parameters.easing = parameters.easing || this._parameters.easing || function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }
            this._parameters.duration = parameters.duration || this._parameters.duration || 1000;
            this._parameters.callback = parameters.callback || this._parameters.callback || function(){};
            if (parameters.bind && parameters.bind != this._parameters.bind) this._BindEvents(parameters.bind); 
        },
        _handleRotation : function(parameters){
              this._setupParameters(parameters);
              if (this._angle==this._parameters.animateTo) {
                  this._rotate(this._angle);
              }
              else { 
                  this._animateStart();          
              }
        },
    
        _BindEvents:function(events){
            if (events && this._eventObj) 
            {
                // Unbinding previous Events
                if (this._parameters.bind){
                    var oldEvents = this._parameters.bind;
                    for (var a in oldEvents) if (oldEvents.hasOwnProperty(a)) 
                            // TODO: Remove jQuery dependency
                            jQuery(this._eventObj).unbind(a,oldEvents[a]);
                }
    
                this._parameters.bind = events;
                for (var a in events) if (events.hasOwnProperty(a)) 
                    // TODO: Remove jQuery dependency
                        jQuery(this._eventObj).bind(a,events[a]);
            }
        },
    
        _Loader:(function()
        {
            if (IE)
            return function(parameters)
            {
                var width=this._img.width;
                var height=this._img.height;
                this._img.parentNode.removeChild(this._img);
                                
                this._vimage = this.createVMLNode('image');
                this._vimage.src=this._img.src;
                this._vimage.style.height=height+"px";
                this._vimage.style.width=width+"px";
                this._vimage.style.position="absolute"; // FIXES IE PROBLEM - its only rendered if its on absolute position!
                this._vimage.style.top = "0px";
                this._vimage.style.left = "0px";
    
                /* Group minifying a small 1px precision problem when rotating object */
                this._container =  this.createVMLNode('group');
                this._container.style.width=width;
                this._container.style.height=height;
                this._container.style.position="absolute";
                this._container.setAttribute('coordsize',width-1+','+(height-1)); // This -1, -1 trying to fix ugly problem with small displacement on IE
                this._container.appendChild(this._vimage);
                
                this._rootObj.appendChild(this._container);
                this._rootObj.style.position="relative"; // FIXES IE PROBLEM
                this._rootObj.style.width=width+"px";
                this._rootObj.style.height=height+"px";
                this._rootObj.setAttribute('id',this._img.getAttribute('id'));
                this._rootObj.className=this._img.className;            
                this._eventObj = this._rootObj;    
                this._handleRotation(parameters);    
            }
            else
            return function (parameters)
            {
                this._rootObj.setAttribute('id',this._img.getAttribute('id'));
                this._rootObj.className=this._img.className;
                
                this._width=this._img.width;
                this._height=this._img.height;
                this._widthHalf=this._width/2; // used for optimisation
                this._heightHalf=this._height/2;// used for optimisation
                
                var _widthMax=Math.sqrt((this._height)*(this._height) + (this._width) * (this._width));
    
                this._widthAdd = _widthMax - this._width;
                this._heightAdd = _widthMax - this._height;    // widthMax because maxWidth=maxHeight
                this._widthAddHalf=this._widthAdd/2; // used for optimisation
                this._heightAddHalf=this._heightAdd/2;// used for optimisation
                
                this._img.parentNode.removeChild(this._img);    
                
                this._aspectW = ((parseInt(this._img.style.width,10)) || this._width)/this._img.width;
                this._aspectH = ((parseInt(this._img.style.height,10)) || this._height)/this._img.height;
                
                this._canvas=document.createElement('canvas');
                this._canvas.setAttribute('width',this._width);
                this._canvas.style.position="relative";
                this._canvas.style.left = -this._widthAddHalf + "px";
                this._canvas.style.top = -this._heightAddHalf + "px";
                this._canvas.Wilq32 = this._rootObj.Wilq32;
                
                this._rootObj.appendChild(this._canvas);
                this._rootObj.style.width=this._width+"px";
                this._rootObj.style.height=this._height+"px";
                this._eventObj = this._canvas;
                
                this._cnv=this._canvas.getContext('2d');
                this._handleRotation(parameters);
            }
        })(),
    
        _animateStart:function()
        {    
            if (this._timer) {
                clearTimeout(this._timer);
            }
            this._animateStartTime = +new Date;
            this._animateStartAngle = this._angle;
            this._animate();
        },
        _animate:function()
        {
             var actualTime = +new Date;
             var checkEnd = actualTime - this._animateStartTime > this._parameters.duration;
    
             // TODO: Bug for animatedGif for static rotation ? (to test)
             if (checkEnd && !this._parameters.animatedGif) 
             {
                 clearTimeout(this._timer);
             }
             else 
             {
                 if (this._canvas||this._vimage||this._img) {
                     var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration);
                     this._rotate((~~(angle*10))/10);
                 }
                 if (this._parameters.step) {
                    this._parameters.step(this._angle);
                 }
                 var self = this;
                 this._timer = setTimeout(function()
                         {
                         self._animate.call(self);
                         }, 10);
             }
    
             // To fix Bug that prevents using recursive function in callback I moved this function to back
             if (this._parameters.callback && checkEnd){
                 this._angle = this._parameters.animateTo;
                 this._rotate(this._angle);
                 this._parameters.callback.call(this._rootObj);
             }
         },
    
        _rotate : (function()
        {
            var rad = Math.PI/180;
            if (IE)
            return function(angle)
            {
                this._angle = angle;
                this._container.style.rotation=(angle%360)+"deg";
            }
            else if (supportedCSS)
            return function(angle){
                this._angle = angle;
                this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)";
            }
            else 
            return function(angle)
            {
                this._angle = angle;
                angle=(angle%360)* rad;
                // clear canvas    
                this._canvas.width = this._width+this._widthAdd;
                this._canvas.height = this._height+this._heightAdd;
                            
                // REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..
                this._cnv.translate(this._widthAddHalf,this._heightAddHalf);    // at least center image on screen
                this._cnv.translate(this._widthHalf,this._heightHalf);            // we move image back to its orginal 
                this._cnv.rotate(angle);                                        // rotate image
                this._cnv.translate(-this._widthHalf,-this._heightHalf);        // move image to its center, so we can rotate around its center
                this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;)
                this._cnv.drawImage(this._img, 0, 0);                            // First - we draw image
            }
    
        })()
    }
    
    if (IE)
    {
    Wilq32.PhotoEffect.prototype.createVMLNode=(function(){
    document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
            try {
                !document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
                return function (tagName) {
                    return document.createElement('<rvml:' + tagName + ' class="rvml">');
                };
            } catch (e) {
                return function (tagName) {
                    return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
                };
            }        
    })();
    }
    
    })(jQuery);
    View Code

    js

    $("#luckyBtn").on("click", function (e) {
    
        // 根据money决定degree
        var money = 500,
             degree = 0;
    
        // 逆时针角度
        var getDegree = function (money) {
            switch (money) {
                case 0:
                    // random = 1 || random = 2
                    var random = Math.ceil(Math.random() * 2 + 1);
    
                    switch (random) {
                        case 1:
                            return 22.5;
                            break;
                        case 2:
                            return 202.5;
                            break;
                        default:
                            return 202.5;
                    }
                    break;
                case 5:
                    return 247.5;
                    break;
                case 10:
                    return 112.5;
                    break;
                case 50:
                    return 337.5;
                    break;
                case 100:
                    return 292.5;
                    break;
                case 500:
                    return 157.5;
                    break;
                case 1000:
                    return 67.5;
                default:
                    return 202.5;
            }
        }
    
        degree = getDegree(money);
    
    
        // img rotate
        $("#rotate").rotate({
            duration:2000,
            angle: 0, 
            animateTo:3600 + degree,
            easing: $.easing.easeOutSine,
            callback: function(){
                alert(money);
            }
        });
    });
  • 相关阅读:
    C#磁吸屏幕窗体类库
    准备
    我写的诗
    How to turn off a laptop keyboard
    How to tell which commit a tag points to in Git?
    Why should I care about lightweight vs. annotated tags?
    How to get rid of “would clobber existing tag”
    Facebook, Google and Twitter threaten to leave Hong Kong over privacy law changes
    The need for legislative reform on secrecy orders
    Can a foreign key be NULL and/or duplicate?
  • 原文地址:https://www.cnblogs.com/xiankui/p/3844950.html
Copyright © 2011-2022 走看看