0

我有一个需要旋转的图像。此图像面向横向或纵向。

我有一个 HTML5 表单来接受每次点击 90 步的旋转度数。当这个值改变时，图像应该旋转和调整大小。它应始终为 770 像素宽，但可以根据需要设置高。

我已经编写了以下事件处理程序，但它并没有按我期望的方式工作。

用例：当图像为纵向时，其初始值为 770x1027 (wxh)。将其旋转 90 度时，我希望下面的函数旋转图像，设置宽度 = 1027 和高度 = 770。但我看到的是宽度和高度都设置为 770。我没有看到什么?

$("#degrees").change(function(){
    var element$ = $("#photo-submission"),
        w = element$.width(), 
        h = element$.height(),
        deg = $(this).val();


    element$.removeAttr("style").attr({
        "style": "-webkit-transform:rotate("+ deg +"deg); width: "+ h +"px; height: "+ w + "px;"
    })
});
4

2 回答 2

1

尝试使用实际用于更改 CSS 属性的 jQuery 方法怎么样，这样更容易跟踪变量并将它们放置在正确的位置：

$("#degrees").change(function(){
    var el  = $("#photo-submission"),
        w   = el.width(), 
        h   = el.height(),
        deg = this.value;

    el.css({
        '-webkit-transform' : 'rotate(' +deg+ 'deg)',
        width  : w,
        height : h
    });
});

小提琴

这样做的真正好处是您不必将宽度和高度设置为现有的值，这基本上就是您正在做的事情，所以这就足够了

$("#degrees").change(function(){
    $("#photo-submission").css({
        '-webkit-transform' : 'rotate(' + this.value + 'deg)'
    });
});
于 2013-11-14T17:41:06.827 回答
1

你似乎改变了你的宽度和高度。

element$.removeAttr("style").attr({
    "style": "-webkit-transform:rotate("+ deg +"deg); width: "+ w +"px; height: "+ h + "px;"
})
于 2013-11-14T17:40:13.417 回答