ホームページ > 記事 > ウェブフロントエンド >
これは最初の外観です。私が望む効果は、ハートがスクロール バーと一緒にスクロールしないことです
スクロール バーをドラッグすると、ハートも一緒に移動しますが、別のハートは元の位置に固定されます。
スクロールバーをドラッグし続けます、
最初のページのハートがスクロールバーとともに移動するのがわかりますが、同時に別のハートが中央に固定されます。
このハートを真ん中に固定したいだけです。スクロールバーの移動によって別のハートが表示されることはありません。
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回しかポップアップしません....
<!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>
解決しました。
次のステートメントを追加します: