Question

我有一个奇怪的问题，这在最近几天让我烦恼，我将尽力解释它，并尽可能提供尽可能多的细节来解决这个问题，提前谢谢。

问题：

请访问：http://tinyurl.com/8td2n3n，并浏览一下，您将在左侧的页面中间看到一个带有挥动旗帜/标签的块。

挥动旗帜/标签是Jquery。在浏览网站时，在Internet Explorer中没有正确显示.animate画布，但在Firefox，Chrome和Safari中更正，但刷新同一页面时它将正确显示.. ..？！？困惑。

到目前为止发现：

在Internet Explorer中重新加载同一页面时，它确实可以正常工作
运行IE脚本调试（F12）时出现错误：

行：87 错误：无法设置属性'width'的值：object为null或undefined

第87行= flag.width = h.width;

下面我发布了javascript块：

<script type="text/javascript">
var h = new Image;
h.onload = function(){
    var flag = document.getElementById('flag');
    var amp = 10;
    flag.width  = h.width;
    flag.height = h.height + amp*2;
    flag.getContext('2d').drawImage(h,0,amp,h.width,h.height);
    flag.style.marginLeft = -(flag.width/2)+'px';
    flag.style.marginTop  = -(flag.height/2)+'px';
    var timer = waveFlag( flag, h.width/10, amp );
};
h.src = 'img/wijnwijs-logo.png';

function waveFlag( canvas, wavelength, amplitude, period, shading, squeeze ){
    if (!squeeze)    squeeze    = 0;
    if (!shading)    shading    = 150;
    if (!period)     period     = 300;
    if (!amplitude)  amplitude  = 10;
    if (!wavelength) wavelength = canvas.width/10;

    var fps = 60;
    var ctx = canvas.getContext('2d');
    var   w = canvas.width, h = canvas.height;
    var  od = ctx.getImageData(0,0,w,h).data;
    // var ct = 0, st=new Date;
    return setInterval(function(){
        var id = ctx.getImageData(0,0,w,h);
        var  d = id.data;
        var now = (new Date)/period;
        for (var y=0;y<h;++y){
            var lastO=0,shade=0;
            var sq = (y-h/2)*squeeze;
            for (var x=0;x<w;++x){
                var px  = (y*w + x)*4;
                var pct = x/w;
                var o   = Math.sin(x/wavelength-now)*amplitude*pct;
                var y2  = y + (o+sq*pct)<<0;
                var opx = (y2*w + x)*4;
                shade = (o-lastO)*shading;
                d[px  ] = od[opx  ]+shade;
                d[px+1] = od[opx+1]+shade;
                d[px+2] = od[opx+2]+shade;
                d[px+3] = od[opx+3];
                lastO = o;
            }
        }
        ctx.putImageData(id,0,0);       
        // if ((++ct)%100 == 0) console.log( 1000 * ct / (new Date - st));
    },1000/fps);
}
</script>

css是：

<style>
    #flag { position:relative; z-index:0;top:-25px;left:100px;}
</style>

实际的html元素是：

<canvas id="flag"></canvas>

我不知道如何让这个工作，任何想法请拍摄，愿意尝试很多。

NEW !!修改CSS调试：新!!

CSS:
-----------------------------------
#wijnwijs_block_left {}
#wijnwijs_block_left h4 {background:#4a1a32;}
#wijnwijs_block_left .block_content {line-height:145%;min-height:200px;padding:0 0 0 0;background:url(../img/categories_dark.png) 0 0 repeat-y;}
#wijnwijs_block_left .block_content a {font:normal 12px "Trebuchet MS";color:#c7d0d0;text-decoration:none;}
#wijnwijs_block_left .block_content a:hover {text-decoration:underline;}
#wijnwijs_block_left select {width:143px;height:26px;margin:7px 0 0 0;padding:3px;background:#fff;border:1px solid #fff;font:normal 12px "Trebuchet MS";color:#3b570e;}
-----------------------------------
div.column div.block {}
div.column div.block h4 {height:33px;padding:16px 0 0 28px;background:#4a1a32;font:normal 16px "Trebuchet MS";color:#fff;text-transform:uppercase;}
div.column div.block h4 a {font:normal 16px "Trebuchet MS";color:#fff;text-decoration:none;}
div.column div.block h4 a:hover {text-decoration:underline;}
div.column div.block .block_content {padding:0 28px 28px 28px;background:#4a1a32;}
div.column div.block ul.bullet {padding-top:21px;}
-----------------------------------
#wijnwijs_block_left {}
#wijnwijs_block_left h4 {background:#4a1a32;}
#wijnwijs_block_left .block_content {line-height:145%;min-height:200px;padding:0 0 0 0;background:url(../img/categories_dark.png) 0 0 repeat-y;}
#wijnwijs_block_left .block_content a {font:normal 12px "Trebuchet MS";color:#c7d0d0;text-decoration:none;}
#wijnwijs_block_left .block_content a:hover {text-decoration:underline;}
#wijnwijs_block_left select {width:143px;height:26px;margin:7px 0 0 0;padding:3px;background:#fff;border:1px solid #fff;font:normal 12px "Trebuchet MS";color:#3b570e;}
-----------------------------------
$(document).ready(function() {
    $('.wijnwijs1').cycle({
    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
-----------------------------------
#flag { position:relative; top:25px;left:100px;}
.wijnwijs1 {
    width: 200px;
    height: 200px;
}
-----------------------------------
<div id="wijnwijs_block_left" class="block">
    <h4>&nbsp;</h4>
    <div class="block_content">
        <div style="position:relative;z-index:9999999;top:-30px;"><a href="wijnwijs.asp"><canvas id="flag"></canvas></a></div>
        <div class="wijnwijs1" style="position:relative;z-index:1;top:-67px;height:100px;">
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155034_cigale classique.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/247715607_jose_galo_rueda.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155202_rocca_ernesto.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155137_corterosso.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155137_salvaterra_amarone.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155137_patriarche.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155137_st_salvaterra.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155202_xr_winemakers_premium.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309156171_grigio_pg.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155459_rocca_grande_passolo.jpg" width="200px" height="200px"/></a>
        </div>
    </div>
</div>

Answer 1

您收到此错误是因为在带有id标志的画布之前加载了图像。刷新后不会抛出此错误，因为在加载图像之前从缓存加载了canvas元素，因为您的图像始终设置为由javascript动态加载。使用$(document).ready()将第三个脚本标记内的代码包装起来，不应该再出现此异常。

<强>更新这是图像向上移动的东西。最初加载页面时，带有画布的div具有不同的尺寸，直到在动画功能中修改画布为止。这就是图像跳起来的原因

<div style="position:relative;z-index:9999999;top:-30px;"><a href="wijnwijs.asp"><canvas id="flag"></canvas></a></div>

一旦它装入下面的容器就位。更具体地说，问题是由于画布的margin-top: -63px，因为这与div容器的定位不同。 enter image description here

需要重新加载Jquery / Canvas / .animate / page / Internet Explorer

1 个答案: