ホームページ > 記事 > ウェブフロントエンド >
- WBOYオリジナル
- 2016-06-24 11:27:542101ブラウズ
これは最初の外観です。私が望む効果は、ハートがスクロール バーと一緒にスクロールしないことです
スクロール バーをドラッグすると、ハートも一緒に移動しますが、別のハートは元の位置に固定されます。
スクロールバーをドラッグし続けます、
最初のページのハートがスクロールバーとともに移動するのがわかりますが、同時に別のハートが中央に固定されます。
このハートを真ん中に固定したいだけです。スクロールバーの移動によって別のハートが表示されることはありません。
JS を通じてキャンバスを作成し、背景画像としてペイントを設定しました。 JS コードは次のとおりです:
var Canvas = document.createElement('canvas');
var Canvas_width = $("body").css ("幅") .split("p")[0];
var Canvas_height = $("body").css("height").split("p")[0]; .appendChild(canvas) ;
Canvas.id='homePageCanvas';
Canvas.height = Canvas_height;
drawHeartCurve(); // ハートを描画します
document.body.style.background = "url('"+homePageCanvas.toDataURL()+"')";
document.body.style['background-attachment']='fixed';
HTML/ CSS には、スクロールバーを表示するための height div があるだけです。
6c04bd5ca3fcae76e30b72ad730ca86d
a6a2db19645f81766a2f1d36e14c73f636cc49f0c466276486e50c850b7e4956
ディスカッションに返信 (解決策)
この行を削除します
Document.body.appendChild(canvas);
いいえちなみに、このように描かれていたものは消えています。
デバッグにアラートを追加し、コードが繰り返し実行されているかどうかを確認することをお勧めします。
コードが繰り返し実行されているかどうかを確認するために、アラート デバッグを追加することをお勧めします。
ハート描画関数にalert(1)を追加しましたが、1回しかポップアップしません....
要素を参照するときはID「homePageCanvas」を使用せず、直接使用してください var Canvas = document.createElement( 'canvas'); この行で定義されている Canvas 変数で十分です
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title><style type="text/css">html,body { height: 100%;}</style></head><body><div id="a" style="width:100px;height:3000px;background:yellow;position:absolute;"></div><script type="text/javascript"> var canvas = document.createElement('canvas'); var canvas_width = document.body.offsetWidth; var canvas_height = document.body.offsetHeight; canvas.id='homePageCanvas'; canvas.width = canvas_width; canvas.height = canvas_height; var context = canvas.getContext("2d"); context.arc(400,400,100,0,2*Math.PI,true); context.fill(); document.body.style.background = "url('"+canvas.toDataURL()+"')"; document.body.style['background-attachment']='fixed';</script></body></html> 解決しました。
次のステートメントを追加します:
canvas.style.display="none";