Question

目前正在尝试使用JQuery和HTML5进行大学任务。我想在移动滑块时更新div的css值。

HTML

Scale<input id="slider" type="range" name="points" min="1" max="10">

目前这是我的剧本：

$("#slider").change(function(){
    size = $("#slider").val();
    console.log("Size: " + size);
    //Update the size of box while dragging
    b1.css({
        "-webkit-transform":"scaleX"+size/10,
        "-webkit-transform":"scaleY"+size/10
    });
});

然而它的工作原理似乎没有在我的CSS中更新，我猜这是因为我错误地分配它们。

有没有人能找到解决问题的方法？

的jsfiddle http://jsfiddle.net/JQ7vD/

Answer 1

主要问题是您在比例值之前和之后忘记了括号。但是，为了使它能够缩放X和Y，你需要将jQuery行合并为一个，即

b1.css({
    "-webkit-transform": "scaleX(" + size / 10 + ") scaleY(" + size / 10 + ")"
});

这是因为如果你将它们放在单独的行中，那么第二个将始终覆盖第一个，因为它在CSS中这样做。采取以下示例

#image {
    background:url('/exampleImage.jpg');
    background:red;
}

背景为红色，而不是先声明的图像。要支持所有浏览器，您还需要在jQuery中包含浏览器前缀

Answer 2

b1.css({
    '-webkit-transform': 'scale3d(' + size/10 + ',' + size/10 + ',1)',
        '-moz-transform': 'scale3d(' + size/10 + ',' + size/10 + '1)',
        '-ms-transform': 'scale3d(' + size/10 + ',' + size/10 + ',1)',
        'transform': 'scale3d(' + size/10 + ',' + size/10 + ',1)'
});

DEMO：http://jsfiddle.net/JQ7vD/4/

使用HTML5 Slider调整Div的scaleX和scaleY

2 个答案: