jquery写的90度翻转

var box1,nx=180,rotXINT,xtop;
var PI = Math.PI;
function onBind(){
     $(‘body‘).on(‘click‘,‘.box‘,function(){
            var a = $(this).next().css(‘top‘);
            if( a == ‘0px‘ ){
                $(this).css(‘border-bottom‘,‘1px solid #D1D2D1‘);
                $(this).css(‘box-shadow‘,‘0 4px 2px rgba(0, 0, 0, .05)‘);
                $(this).next().css(‘border-top‘,‘1px solid #D1D2D1‘);
                nx = 0;
            }else{
                $(this).css(‘border-bottom‘,0);
                $(this).css(‘box-shadow‘,‘‘);
                $(this).next().css(‘border-top‘,0);
                nx = -90;
            };
            box1 = $(this).next();
            clearInterval(rotXINT);
            rotXINT=setInterval("startXRotate()",1);
     });
};

function startXRotate(){
        nx = nx + 1;
        //旋转角度
        var degx = "rotateX(" + nx + "deg)";
        box1.css(‘transform‘,degx);
        box1.css(‘webkitTransform‘,degx);
        box1.css(‘OTransform‘,degx);
        box1.css(‘MozTransform‘,degx);

        //两种拼凑起来才是完整的
        var angle = 2 * PI / 360 * nx;
        xtop = Math.cos(angle) * 120 - 120;
        var xtoppx = xtop + ‘px‘;
        box1.css(‘margin-top‘,xtoppx);

        var xelse = 60 - Math.cos(angle) * 60;
        var xelsepx = xelse + ‘px‘;
        box1.css(‘top‘,xelsepx);

        if (nx==0 || nx>=90){
            clearInterval(rotXINT);
        };
};
    
时间: 2024-10-12 10:16:13

jquery写的90度翻转的相关文章

90度翻转矩阵

/** * 一张图像表示成NxN的矩阵,图像中每个像素是4个字节,写一个函数把图像旋转90度. * 要求进行原地操作!(即不开辟额外的存储空间) * * 可以分两步走. 第一步交换主对角线两侧的对称元素,第二步交换第i行和第n-1-i行,即得到结果 * 原图: 第一步操作后: 第二步操作后: * 1 2 3 4 1 5 9 13 4 8 12 16 * 5 6 7 8 2 6 10 14 3 7 11 15 * 9 10 11 12 3 7 11 15 2 6 10 14 * 13 14 15

iOS开发- 相机(摄像头)获取到的图片自动旋转90度解决办法

http://www.tuicool.com/articles/IfEZre 今天写demo的时候发现, 如果把通过相机获取到的图片,直接进行操作, 比如裁剪, 缩放, 则会把原图片向又旋转90度. 刚开始觉得莫名其妙, 不知所措. 后来百度了一下,找到了解决办法. ps: 查找过程中, 碰到了一种说法: //get original photo from iOS photos //如果该图片大于2M,会自动旋转90度:否则不旋转 UIImage* originalImg=[dict objec

opencv图像原地(不开辟新空间)顺时旋转90度

前一阵朋友碰到这么一道题:将图像原地顺时针旋转90度,不开辟新空间.此题看似平易(题目简短),仔细研究发现着实不容易.经过一番探索后,终于找到了正确的算法,但是当使用opencv实现时,有碰到了困难而且费了一番周折才找到问题所在. 首先,解决这个问题,先简化成原地90度旋转一M×N的矩阵A(注意不是N×N方阵).对于2×3的矩阵A = {1,2,3;4,5,6},其目标为矩阵B = {4,1;5,2;6,3}.因为是原地旋转,这里A和B应指向同一大小为6的内存空间. 这里有这样一个重要的导出公式

CC150:将一个矩阵旋转90度

一张图像表示成n X n的矩阵,写一个函数把图像旋转90度.不开辟额外的存储空间 我们假设要将图像逆时针旋转90度.原图如下所示: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 逆时针旋转90度后的图应该是: 4 8 12 16 3 7 11 15 2 6 10 14 1 5 9 13 我们要如何原地进行操作以达到上面的效果呢?可以分两步 第一步交换主对角线两侧的对称元素, 第二步交换第i行和第n-1-i行,即得到结果. 看图示: 原图:           第一

Android动画--Activity界面180度翻转

这个动画效果是把Activity当做一张纸,正反面都有内容,且当点击正反面的任何一个翻转按钮,Activity都会以屏幕中心为翻转中心点(Z轴的翻转中心点可以自由设定),进行旋转. 效果如下图所示(不懂上传Gif图,懂的人请告知哈): 这个动画效果的思路是这样的,首先两个界面的布局都在同一个Layout文件中,因为这里只有一个Activity,所以两个界面的布局在同一个layout文件中就要有所设计. 在这里,我使用的是FrameLayout作为父容器,包裹着两个RelativeLayout子容

矩阵旋转90度(keep it up)

一张图像表示成NxN的矩阵,图像中每个像素是4个字节,写一个函数把图像旋转90度. 你能原地进行操作吗?(即不开辟额外的存储空间) 这个题第一感觉就是一次交换矩阵的元素: 比如 3*3 矩阵 1 2 3 4 5 6 7 8 9 先处理第一行,一次逆时针旋转四个元素,下面是二次做的 3 2 9          3 6 9 4 5 6          2 5 8 1 8 7          1 4 7 第一次         第二次 如果是5*5的矩阵 1   2   3   4   5 6

利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,详见  http://code.ciaoca.com/javascript/exif-js/ 这里主要用到Orientation属性. Orientation属性说明如下: 旋转角度 参数 0° 1 顺时针90° 6 逆时针9

图片旋转90度解决的方法

假设把通过相机获取到的图片,直接进行操作, 比方裁剪, 缩放, 则会把原图片向又旋转90度. ps: 查找过程中, 碰到了一种说法: [objc] view plaincopy //get original photo from iOS photos //假设该图片大于2M,会自己主动旋转90度:否则不旋转 UIImage* originalImg=[dict objectForKey:UIImagePickerControllerOriginalImage]; 至于是否正确, 还没确定. 先M

图片旋转90度解决办法

如果把通过相机获取到的图片,直接进行操作, 比如裁剪, 缩放, 则会把原图片向又旋转90度. ps: 查找过程中, 碰到了一种说法: [objc] view plaincopy //get original photo from iOS photos //如果该图片大于2M,会自动旋转90度:否则不旋转 UIImage* originalImg=[dict objectForKey:UIImagePickerControllerOriginalImage]; 至于是否正确, 还没确定. 先Mar