码迷,mamicode.com
首页 > Web开发 > 详细

jquery写的90度翻转

时间:2015-11-19 20:56:46      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:

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);
        };
};
    

 

jquery写的90度翻转

标签:

原文地址:http://www.cnblogs.com/neuscx/p/4978903.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!