在addeventlistener函数上调整图像大小

时间:2014-01-12 04:52:34

标签: javascript image resize addeventlistener event-listener

我尝试使用addEventListener调整图片大小。我搜索了这个问题并发现了类似的问题,但我还没能使这个功能正常工作。

以下代码演示了一个调整图像大小的工作函数。

    header.onload=function(){
        var fullHeaderWidth=this.width
        if(fullHeaderWidth>window.innerWidth)
            header.width=window.innerWidth;

        setInterval(function(){
            if(fullHeaderWidth>window.innerWidth)
                header.width=window.innerWidth;
            else
                header.width=fullHeaderWidth;   
        },50)
    };

但是当我尝试使用这个功能时......

    var header=new Image();
    header=document.getElementById('header');
    header.onload=function(){
        var fullHeaderWidth=this.width
        if(fullHeaderWidth>window.innerWidth)
            header.width=window.innerWidth; 
    };
    header.src='file:///C|/Users/Dillon/Development/Jesses Works/header.gif'

    window.addEventListener('resize',function(){
        if(fullHeaderWidth>window.innerWidth)
            header.width=window.innerWidth;
        else
            header.width=fullHeaderWidth;   
    },false)

事件触发(我知道这是因为我在函数中使用了alert),但图像不会调整大小。有什么想法吗?

1 个答案:

答案 0 :(得分:0)

你感到困惑,我想你正试图做这样的事情:

window.addEventListener('load', function () {
    setInterval(function () {
        var fullHeaderWidth = this.width;
        if (fullHeaderWidth > window.innerWidth) {
            header.width = window.innerWidth;
        } else {
            header.width = fullHeaderWidth;
        }
    }, 50);
});