1

恥ずかしいほど簡単な質問があります。幅と高さの属性をハードコーディングせずに、画像を 2 倍のサイズで表示するにはどうすればよいですか? これが私が試したことですが、幅と高さに1000を入力するだけで済みました。私の機能に何か問題がありますか？ありがとう！

<img onload="double(self.id);" name="bigPic" id="bigPic" src="album1.jpg" height="1000" width="1000"/>

    function double(id) {
        var img = document.getElementById(id);
        var dblWdth = img.width * 2;
        var dblHt = img.height * 2;

        img.height = dblHt;
        img.width = dblWdth;
    }
4

5 に答える 5

3

これには本当に JavaScript は必要ありません。CSSでできます。

img {
    zoom: 2;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

もちろん、これにより、ページ上のすべての画像のサイズが 2 倍になります。代わりに、クラスを作成して、それを 2 倍にする必要があるすべての画像に割り当てるか、それらの画像だけを選択する別の方法を見つけたいと思うかもしれません。また、マウスオーバー (ホバー) でサイズを 2 倍に設定したり、純粋に css を使用してアニメーション (一部のブラウザーでは) で拡大したりすることもできます。

于 2012-06-04T05:02:52.753 に答える
2

ではないdouble(self.id);がdouble(this.id);

デモ。_

を渡すだけthisで、より簡単になります。

function double(img) {
    img.height *= 2;
    img.width *= 2;
}
于 2012-06-04T04:45:00.480 に答える
0

これを達成するには window.load function() を使用する必要があります

window.onload=function() {double("bigPic");
    }
于 2012-06-04T04:38:20.040 に答える
0 
window.onload = function() {
     double("bigPic")
};

これでうまくいくはずです。ウィンドウの onload メソッドを使用して、ページの読み込み時に実行する必要があるすべてのことを実行できます。

于 2012-06-04T04:42:00.450 に答える
0

jquery を使用する場合は、次の方法で実行できます。

<img name="bigPic" id="bigPic" src="album1.jpg" />

<script type="text/javascript">
    $(document).ready(function () {
        $("#bigPic")[0].width *= 2;
        $("#bigPic")[0].height *= 2; // may not be necessary, see note
    });
</script>

jquery なし: Okonomiyaki3000 で指摘されているようdoubleに、JavaScript のデータ型の予約語であるため、関数名には適していません。

<img name="bigPic" id="bigPic" src="album1.jpg" onload='superSize(this);' />

function superSize(me) {
    me.width = me.width * 2;
    me.height = me.height * 2; //may not be necessary, see note
}

注: 高さを指定しない場合、高さは自動的に 2 倍になります。幅についてはその逆です。しかし、私はIE9とFF12でのみテストしました。

于 2012-06-04T04:43:31.973 に答える