私はここ数日私を悩ませている奇妙な問題を抱えています、私はそれをできるだけよく説明しようとし、この問題を解決するためにできるだけ多くの詳細を提供しようとします、事前に感謝します。
問題：
http://tinyurl.com/8td2n3nにアクセスして、閲覧すると、左側のページの途中に旗/ラベルが振られているブロックが表示されます。
波打つフラグ/ラベルはJqueryです。サイトを閲覧するときにInternetExplorerでアニメーションキャンバスが正しく表示されませんが、Firefox、chrome、safariでは正しく表示されますが、同じページを更新すると正しく表示されます。 ！？混乱している。
これまでに見つかった：
- Internet Explorerで同じページをリロードすると、機能します
- IEスクリプトのデバッグ（F12）を実行すると、エラーが発生します。
行：87エラー：プロパティ'width'の値を設定できません：オブジェクトがnullまたは未定義です
行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>
これを機能させるために何をすべきかわかりません。アイデアがあれば誰でも撮影してください。たくさん試してみてください。
新着！！CSSデバッグ用に修正：NEW !!
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> </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>
