0

目前正在尝试使用 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/

4

2 回答 2

2

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

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

这是因为如果您将它们放在单独的行中，那么第二个将始终覆盖第一个，因为它在 CSS 中这样做。举个例子

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

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

于 2013-10-23T14:54:38.530 回答
1 
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)'
});

演示：http: //jsfiddle.net/JQ7vD/4/

于 2013-10-23T14:41:09.033 回答