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 の行を 1 つにまとめる必要があります。

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

これは、それらが別々の行にある場合、CSS で行われるため、2 番目の行が最初の行を常にオーバーライドするためです。次の例を見てください

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

最初に宣言された画像ではなく、背景が赤になります。すべてのブラウザーをサポートするには、jQuery にもブラウザーのプレフィックスを含める必要があります。

于 2013-10-23T14:54:38.530 に答える