jquery实现旋转

最新推荐文章于 2022-07-25 17:31:51 发布

YY小怪兽

最新推荐文章于 2022-07-25 17:31:51 发布

阅读量3.7k

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/lihui61357457/article/details/120502314

版权

jquery javascript html5

jQuery 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

参数	类型	说明	默认值
angle	数字	旋转一个角度	0
animateTo	数字	从当前的角度旋转到多少度	0
step	函数	每个动画步骤中执行的回调函数，当前角度值作为该函数的第一个参数无	无
easing	函数	自定义旋转速度、旋转效果，需要使用 jQuery.easing.js	无
duration	整数	旋转持续时间	以毫秒为单位
callback	函数	旋转完成后的回调函数	无
getRotateAngle	函数	返回旋转对象当前的角度	无
stopRotate	函数	停止旋转	无

需要添加jquery-rotate.js和jquery-easing.js文件

1.angle属性：［Number］ – default 0 – 旋转的角度数，并且立即执行

$(“.content”).rotate({angle:45});

2.bind属性：［Object］对象，包含绑定到一个旋转对象的事件。事件内部的$（this）指向旋转对象-这样可以在内部链式调用- $（this）.rotate（…）。

$(".content").rotate({
  bind:{
    click: function(){
      $(this).rotate({
        angle: 0,
        animateTo:180
      })
    }
  }
});

3.animateTo属性：［Number］ – default 0 – 从当前角度值动画旋转到给定的角度值（或给定的角度参数）

4.duration属性：［Number］ – 指定使用animateTo的动画执行持续时间

$(".content").rotate({
  bind:{
    click: function() {
      $(this).rotate({
        duration: 6000,
        angle: 0,
        animateTo:100
      })
    }
  }
});

step属性：［Function］ – 每个动画步骤中执行的回调函数，当前角度值作为该函数的第一个参数
easing属性：［Function］ – 默认（see below）
默认：function （x， t， b， c， d） { return -c * （（t=t/d-1）tt*t - 1） + b; }

Where:

x 总时间进度，即x = t/d
t 当前动画执行时间（毫秒）
b 初始值
c 总变化量
d 动画总的持续时间

没有渐变：No easing （linear easing）：function（x， t， b， c， d） { return （t/d）*c ; }

7.callback属性：［Function］动画完成时执行的回调函数

// 旋转完成后弹出1
$(".content").rotate({
  bind:{
    click: function(){
      $(this).rotate({
        angle: 0,
        animateTo:180,
        callback: function(){ 
          alert(1)
        }
      })
    }
  }
});

getRotateAngle这个函数只是简单地返回旋转对象当前的角度。

// 旋转完成后，点击弹出当前角度45
$(".content").rotate({
  angle: 45,
  bind: {
    click : function(){
      alert($(this).getRotateAngle());
    }
  }
});

9.stopRotate这个函数只是简单地停止正在进行的旋转动画。例如：

$(".content").rotate({
    bind: {
        click: function(){
            $(this).rotate({
                angle: 0,
                animateTo: 180,
                duration: 6000
            });
        setTimeout(function(){
            $("#img").stopRotate();
            }, 1000);
        }
    }
});

示例1：直接旋转一个角度

$(".content").rotate(45);  

// 或者

$(".content").rotate({angle:45});

示例2：鼠标移动效果

$(".content").rotate({   
    bind : {  
        mouseover : function(){  
            $(this).rotate({animateTo: 180});  
        }, mouseout : function(){  
            $(this).rotate({animateTo: 0});  
        }  
    }  
});

示例3：不停旋转

var angle = 0;  
setInterval(function(){  
    angle +=3;  
    $(".content").rotate(angle);  
}, 50);  

// 或者

var rotation = function (){  
    $(".content").rotate({  
        angle: 0,   
        animateTo: 360,   
        callback: rotation  
    });  
}  
rotation();

// 或者

var rotation2 = function(){  
    $(".content").rotate({  
        angle: 0,   
        animateTo: 360,   
        callback: rotation2,  
        easing: function(x,t,b,c,d){  
            return c*(t/d)+b;  
        }  
    });  
}  
rotation2();

示例4：点击旋转

$(".content").rotate({   
    bind: {  
        click: function(){  
            $(this).rotate({  
                angle: 0,  
                animateTo: 180,  
                easing: $.easing.easeInOutExpo  
            });  
        }  
    }  
});

// 或者

var value2 = 0;  
$(".content").rotate({   
    bind: {  
        click: function(){  
            value2 +=90;  
            $(this).rotate({  
                animateTo: value2  
            });  
        }  
    }  
});

jquery.rotate.js

(function($) {
    var supportedCSS,supportedCSSOrigin, 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]; }
    if (supportedCSS) {
        supportedCSSOrigin = supportedCSS.replace(/[tT]ransform/,"TransformOrigin");
        if (supportedCSSOrigin[0] == "T") supportedCSSOrigin[0] = "t";
    }

    // Bad eval to preven google closure to remove it from code o_O
    eval('IE = "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 = [0];
            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) {
                this._img = img;
                this._onLoadDelegate = [parameters];

                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();
                } else {
                    var self=this;
                    // TODO: Remove jQuery dependency
                    jQuery(this._img).bind("load", function(){ self._Loader(); });
                }
            }
        }
    })();

    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 || this._defaultEasing;
            this._parameters.duration = 'duration' in parameters ? parameters.duration : parameters.duration || this._parameters.duration || 1000;
            this._parameters.callback = parameters.callback || this._parameters.callback || this._emptyFunction;
            this._parameters.center = parameters.center || this._parameters.center || ["50%","50%"];
            if (typeof this._parameters.center[0] == "string") {
                this._rotationCenterX = (parseInt(this._parameters.center[0],10) / 100) * this._imgWidth * this._aspectW;
            } else {
                this._rotationCenterX = this._parameters.center[0];
            }
            if (typeof this._parameters.center[1] == "string") {
                this._rotationCenterY = (parseInt(this._parameters.center[1],10) / 100) * this._imgHeight * this._aspectH;
            } else {
                this._rotationCenterY = this._parameters.center[1];
            }

            if (parameters.bind && parameters.bind != this._parameters.bind) { this._BindEvents(parameters.bind); }
        },
        _emptyFunction: function(){},
        _defaultEasing: function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b },
        _handleRotation : function(parameters, dontcheck){
            if (!supportedCSS && !this._img.complete && !dontcheck) {
                this._onLoadDelegate.push(parameters);
                return;
            }
            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() {
                    var width=this._img.width;
                    var height=this._img.height;
                    this._imgWidth = width;
                    this._imgHeight = 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";
                    this._aspectW = this._aspectH = 1;

                    /* 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.style.top="0px";
                    this._container.style.left="0px";
                    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;
                    var parameters;
                    while (parameters = this._onLoadDelegate.shift()) {
                        this._handleRotation(parameters, true);
                    }
                }
            else return function () {
                this._rootObj.setAttribute('id',this._img.getAttribute('id'));
                this._rootObj.className=this._img.className;

                this._imgWidth=this._img.naturalWidth;
                this._imgHeight=this._img.naturalHeight;
                var _widthMax=Math.sqrt((this._imgHeight)*(this._imgHeight) + (this._imgWidth) * (this._imgWidth));
                this._width = _widthMax * 3;
                this._height = _widthMax * 3;

                this._aspectW = this._img.offsetWidth/this._img.naturalWidth;
                this._aspectH = this._img.offsetHeight/this._img.naturalHeight;

                this._img.parentNode.removeChild(this._img);


                this._canvas=document.createElement('canvas');
                this._canvas.setAttribute('width',this._width);
                this._canvas.style.position="relative";
                this._canvas.style.left = -this._img.height * this._aspectW + "px";
                this._canvas.style.top = -this._img.width * this._aspectH + "px";
                this._canvas.Wilq32 = this._rootObj.Wilq32;

                this._rootObj.appendChild(this._canvas);
                this._rootObj.style.width=this._img.width*this._aspectW+"px";
                this._rootObj.style.height=this._img.height*this._aspectH+"px";
                this._eventObj = this._canvas;

                this._cnv=this._canvas.getContext('2d');
                var parameters;
                while (parameters = this._onLoadDelegate.shift()) {
                    this._handleRotation(parameters, true);
                }
            }
        })(),

        _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";
                    this._vimage.style.top = -(this._rotationCenterY - this._imgHeight/2) + "px";
                    this._vimage.style.left = -(this._rotationCenterX - this._imgWidth/2) + "px";
                    this._container.style.top = this._rotationCenterY - this._imgHeight/2 + "px";
                    this._container.style.left = this._rotationCenterX - this._imgWidth/2 + "px";

                }
            else if (supportedCSS)
                return function(angle){
                    this._angle = angle;
                    this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)";
                    this._img.style[supportedCSSOrigin]=this._parameters.center.join(" ");
                }
            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._imgWidth*this._aspectW,this._imgHeight*this._aspectH);	// at least center image on screen
                    this._cnv.translate(this._rotationCenterX,this._rotationCenterY);			// we move image back to its orginal
                    this._cnv.rotate(angle);										// rotate image
                    this._cnv.translate(-this._rotationCenterX,-this._rotationCenterY);		// 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);

jquery-easing.js

/*
 * jQuery Easing v1.4.1 - http://gsgd.co.uk/sandbox/jquery/easing/
 * Open source under the BSD License.
 * Copyright © 2008 George McGinley Smith
 * All rights reserved.
 * https://raw.github.com/gdsmith/jquery.easing/master/LICENSE
*/

/* globals jQuery, define, module, require */
(function (factory) {
    if (typeof define === "function" && define.amd) {
        define(['jquery'], function ($) {
            return factory($);
        });
    } else if (typeof module === "object" && typeof module.exports === "object") {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }
})(function($){

    // Preserve the original jQuery "swing" easing as "jswing"
    if (typeof $.easing !== 'undefined') {
        $.easing['jswing'] = $.easing['swing'];
    }

    var pow = Math.pow,
        sqrt = Math.sqrt,
        sin = Math.sin,
        cos = Math.cos,
        PI = Math.PI,
        c1 = 1.70158,
        c2 = c1 * 1.525,
        c3 = c1 + 1,
        c4 = ( 2 * PI ) / 3,
        c5 = ( 2 * PI ) / 4.5;

    // x is the fraction of animation progress, in the range 0..1
    function bounceOut(x) {
        var n1 = 7.5625,
            d1 = 2.75;
        if ( x < 1/d1 ) {
            return n1*x*x;
        } else if ( x < 2/d1 ) {
            return n1*(x-=(1.5/d1))*x + .75;
        } else if ( x < 2.5/d1 ) {
            return n1*(x-=(2.25/d1))*x + .9375;
        } else {
            return n1*(x-=(2.625/d1))*x + .984375;
        }
    }

    $.extend( $.easing, {
        def: 'easeOutQuad',
        swing: function (x) {
            return $.easing[$.easing.def](x);
        },
        easeInQuad: function (x) {
            return x * x;
        },
        easeOutQuad: function (x) {
            return 1 - ( 1 - x ) * ( 1 - x );
        },
        easeInOutQuad: function (x) {
            return x < 0.5 ?
                2 * x * x :
                1 - pow( -2 * x + 2, 2 ) / 2;
        },
        easeInCubic: function (x) {
            return x * x * x;
        },
        easeOutCubic: function (x) {
            return 1 - pow( 1 - x, 3 );
        },
        easeInOutCubic: function (x) {
            return x < 0.5 ?
                4 * x * x * x :
                1 - pow( -2 * x + 2, 3 ) / 2;
        },
        easeInQuart: function (x) {
            return x * x * x * x;
        },
        easeOutQuart: function (x) {
            return 1 - pow( 1 - x, 4 );
        },
        easeInOutQuart: function (x) {
            return x < 0.5 ?
                8 * x * x * x * x :
                1 - pow( -2 * x + 2, 4 ) / 2;
        },
        easeInQuint: function (x) {
            return x * x * x * x * x;
        },
        easeOutQuint: function (x) {
            return 1 - pow( 1 - x, 5 );
        },
        easeInOutQuint: function (x) {
            return x < 0.5 ?
                16 * x * x * x * x * x :
                1 - pow( -2 * x + 2, 5 ) / 2;
        },
        easeInSine: function (x) {
            return 1 - cos( x * PI/2 );
        },
        easeOutSine: function (x) {
            return sin( x * PI/2 );
        },
        easeInOutSine: function (x) {
            return -( cos( PI * x ) - 1 ) / 2;
        },
        easeInExpo: function (x) {
            return x === 0 ? 0 : pow( 2, 10 * x - 10 );
        },
        easeOutExpo: function (x) {
            return x === 1 ? 1 : 1 - pow( 2, -10 * x );
        },
        easeInOutExpo: function (x) {
            return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ?
                pow( 2, 20 * x - 10 ) / 2 :
                ( 2 - pow( 2, -20 * x + 10 ) ) / 2;
        },
        easeInCirc: function (x) {
            return 1 - sqrt( 1 - pow( x, 2 ) );
        },
        easeOutCirc: function (x) {
            return sqrt( 1 - pow( x - 1, 2 ) );
        },
        easeInOutCirc: function (x) {
            return x < 0.5 ?
                ( 1 - sqrt( 1 - pow( 2 * x, 2 ) ) ) / 2 :
                ( sqrt( 1 - pow( -2 * x + 2, 2 ) ) + 1 ) / 2;
        },
        easeInElastic: function (x) {
            return x === 0 ? 0 : x === 1 ? 1 :
                -pow( 2, 10 * x - 10 ) * sin( ( x * 10 - 10.75 ) * c4 );
        },
        easeOutElastic: function (x) {
            return x === 0 ? 0 : x === 1 ? 1 :
                pow( 2, -10 * x ) * sin( ( x * 10 - 0.75 ) * c4 ) + 1;
        },
        easeInOutElastic: function (x) {
            return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ?
                -( pow( 2, 20 * x - 10 ) * sin( ( 20 * x - 11.125 ) * c5 )) / 2 :
                pow( 2, -20 * x + 10 ) * sin( ( 20 * x - 11.125 ) * c5 ) / 2 + 1;
        },
        easeInBack: function (x) {
            return c3 * x * x * x - c1 * x * x;
        },
        easeOutBack: function (x) {
            return 1 + c3 * pow( x - 1, 3 ) + c1 * pow( x - 1, 2 );
        },
        easeInOutBack: function (x) {
            return x < 0.5 ?
                ( pow( 2 * x, 2 ) * ( ( c2 + 1 ) * 2 * x - c2 ) ) / 2 :
                ( pow( 2 * x - 2, 2 ) *( ( c2 + 1 ) * ( x * 2 - 2 ) + c2 ) + 2 ) / 2;
        },
        easeInBounce: function (x) {
            return 1 - bounceOut( 1 - x );
        },
        easeOutBounce: bounceOut,
        easeInOutBounce: function (x) {
            return x < 0.5 ?
                ( 1 - bounceOut( 1 - 2 * x ) ) / 2 :
                ( 1 + bounceOut( 2 * x - 1 ) ) / 2;
        }
    });
    return $;
});