jquery - 如何缩放整个div?

标签 jquery zooming rotation

我现在正在 this page 上玩弄一个函数.

如果单击“who”部分,div 就会旋转。我希望它能够缩放并使用页面。

这可能吗?如何做到这一点?

最佳答案

旋转后,将其宽度和高度设置为页面的宽度和高度。

$('#who').rotate({
    angle:-90,
    bind: [{
        click: function(){
            $(this).rotateAnimation(0);
        }
    }], // remove the trailing comma here
    callback: function (){
        var $window = $(window);
        $(this).height($window.height()).width($window.width());
    }
});
<小时/>

编辑回复:OP的评论

$('#who').rotate({
    angle: -90,
    bind: [{
        click: function(){
            $(this).rotateAnimation(0);
        }
    }],
    callback: function (){
        $(this).width(800).height(600);
    }
});

参见.height().width() .

<小时/>

编辑#2

使用当前的 CSS,您需要缩放 img

$('#who').rotate({
    angle: -90,
    bind: [{
        click: function(){
            $(this).rotateAnimation(0);
        }
    }],
    callback: function (){
        $('#who > img').animate({height: 600, width: 800});
    }
});

如果您将图像的高度宽度更改为100%,那么您只需更改的大小code>div 并且图像应随之缩放。

$('#who').animate({height: 600, width: 800});

关于jquery - 如何缩放整个div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5222198/

相关文章:

javascript - Firefox 中的 HTML5 音频标签错误

jquery - 动画图像的 CSS 给出不同的结果

javafx - 在已经缩放的节点中的枢轴点处缩放

css - 如何在 CSS 中居中文本和控制用户缩放

c++ - 我的方形 tetrimonos 一直奇怪地旋转,但我的其他 tetrimonos 旋转正常?

java - 将旋转对象对应到数值

javascript - 在 JavaScript 中插入空选项字段

jquery颜色选择器错误

css - JavaFX 2.2 - 如何在 scrollPane 内缩放后调整滚动?

actionscript-3 - As3 Sprite 旋转X和旋转Y