1

我有一个令人尴尬的简单问题：如何在不硬编码宽度和高度属性的情况下以两倍大小显示图像？这是我尝试过的，但最终我只需要输入 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);
}

当然，这会使页面上所有图像的大小翻倍。也许相反，您想创建一个类并将其分配给所有应该加倍的图像，或者找到其他方法来选择这些图像。您还可以在鼠标悬停（悬停）时将其设置为双倍大小，或者仅使用 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.onload = function() {
     double("bigPic")
};

这应该够了吧。您可以使用 window 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
}

注意：看起来如果你不指定高度，高度会自动加倍。反之亦然。但我只在 IE9 和 FF12 上测试过。

于 2012-06-04T04:43:31.973 回答
0

你必须使用 window.load function() 来实现这一点

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