zoukankan      html  css  js  c++  java
  • JQuery插件让图片旋转任意角度且代码极其简单

    JQuery插件让图片旋转任意角度且代码极其简单
    2012-04-01 09:57:03     我来说两句      
    收藏    我要投稿

    引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度,

    例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });中

    就是将id为rotate-image的图片旋转45度。

    不过,貌似在Chrome中总是不显示。

    唉,找了两个小时,才发现Chrome太坑爹了,没法获取图片的长宽。

    解决办法是,把$("#rotate-image").rotate(45);放在

    $(window).load(function(){ });中,因为在Chrome中图片在执行$(document).ready(function(){ });中的语句时并没有加载完图片,坑爹啊。


    另外可以更方便的通过调用$("选择器").rotateRight()和$("选择器").rotateLeft()来分别向右旋转90度和向左旋转90度。


    jquery.rotate.js:


    [javascript]
    jQuery.fn.rotate = function(angle,whence) { 
        var p = this.get(0); 
     
        // we store the angle inside the image tag for persistence  
        if (!whence) { 
            p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360; 
        } else { 
            p.angle = angle; 
        } 
     
        if (p.angle >= 0) { 
            var rotation = Math.PI * p.angle / 180; 
        } else { 
            var rotation = Math.PI * (360+p.angle) / 180; 
        } 
        var costheta = Math.round(Math.cos(rotation) * 1000) / 1000; 
        var sintheta = Math.round(Math.sin(rotation) * 1000) / 1000; 
        //alert(costheta+","+sintheta);  
      
        if (document.all && !window.opera) { 
            var canvas = document.createElement('img'); 
     
            canvas.src = p.src; 
            canvas.height = p.height; 
            canvas.width = p.width; 
     
            canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')"; 
        } else { 
            var canvas = document.createElement('canvas'); 
            if (!p.oImage) { 
                canvas.oImage = new Image(); 
                canvas.oImage.src = p.src; 
            } else { 
                canvas.oImage = p.oImage; 
            } 
     
            canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height); 
            canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width); 
     
            var context = canvas.getContext('2d'); 
            context.save(); 
            if (rotation <= Math.PI/2) { 
                context.translate(sintheta*canvas.oImage.height,0); 
            } else if (rotation <= Math.PI) { 
                context.translate(canvas.width,-costheta*canvas.oImage.height); 
            } else if (rotation <= 1.5*Math.PI) { 
                context.translate(-costheta*canvas.oImage.width,canvas.height); 
            } else { 
                context.translate(0,-sintheta*canvas.oImage.width); 
            } 
            context.rotate(rotation); 
            context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height); 
            context.restore(); 
        } 
        canvas.id = p.id; 
        canvas.angle = p.angle; 
        p.parentNode.replaceChild(canvas, p); 

     
    jQuery.fn.rotateRight = function(angle) { 
        this.rotate(angle==undefined?90:angle); 

     
    jQuery.fn.rotateLeft = function(angle) { 
        this.rotate(angle==undefined?-90:-angle); 

     

  • 相关阅读:
    CodeForces Gym 100500A A. Poetry Challenge DFS
    CDOJ 486 Good Morning 傻逼题
    CDOJ 483 Data Structure Problem DFS
    CDOJ 482 Charitable Exchange bfs
    CDOJ 481 Apparent Magnitude 水题
    Codeforces Gym 100637G G. #TheDress 暴力
    Gym 100637F F. The Pool for Lucky Ones 暴力
    Codeforces Gym 100637B B. Lunch 找规律
    Codeforces Gym 100637A A. Nano alarm-clocks 前缀和
    TC SRM 663 div2 B AABB 逆推
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3191607.html
Copyright © 2011-2022 走看看