Question

我是Jade和NodeJS express的新手。我有一个简单的网页，加载带有div标签的jpeg。我希望能够使用以下html和JS获得响应式图像映射，但无法使其工作。

<div style="width:100%;">
<img id="img_ID" src="http://pindragon.social/images/landing.jpeg" usemap="#map" border="0" width="100%" alt="" />

window.onload = function () {
var ImageMap = function (map, img) {
        var n,
            areas = map.getElementsByTagName('area'),
            len = areas.length,
            coords = [],
            previousWidth = 128;
        for (n = 0; n < len; n++) {
            coords[n] = areas[n].coords.split(',');
        }
        this.resize = function () {
            var n, m, clen,
                x = img.offsetWidth / previousWidth;
            for (n = 0; n < len; n++) {
                clen = coords[n].length;
                for (m = 0; m < clen; m++) {
                    coords[n][m] *= x;
                }
                areas[n].coords = coords[n].join(',');
            }
            previousWidth = document.body.clientWidth;
            return true;
        };
        window.onresize = this.resize;
    },
    imageMap = new ImageMap(document.getElementById('map_ID'), document.getElementById('img_ID'));
imageMap.resize();
return;

}

Answer 1

请注意，在＆＃39;脚本之前不允许有空格。＆＃39; 使用空格或制表符但不能同时使用。 Jade / Pug对此非常挑剔。我不打算在此处发布代码，因为它使用了标签而且没有格式化。

放置＆＃39;脚本。＆＃39;在＆＃39; head＆＃39;在layout.jade中，并使用window.onload JS使用空格或制表符正确缩进。

将html作为jade标签放在index.jade

中

如何让window.onload函数在Jade模板语言中工作

1 个答案: