0

私は Web サイトを持っていますが、これを実行したいと考えています。ページの左側の画像をクリックするとページが後ろに移動し、右側の画像をクリックするとページが前に移動します。私はすべてを正しく設定したので、cssでこれを簡単に実行しようとしました.onmouseoverはページの余白を右または左に非常に多くのピクセルを移動します:

<p onmouseover="hoverForward" style="text-indent:-1000px;">
<div id="menu" style="height: 504px; width: 92px; position: absolute; z-index: 2; top: 62px; left: 1353px;">
<img src="image.jpg">
</div></p>

しかし、それは私に何の結果も与えません。そこで、javascript onmouseclick の w3Schools の例を使用してみました。

function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
}
<p onmouseover="hoverForward" style="text-indent:-1000px;">
<div id="menu" style="height: 504px; width: 92px; position: absolute; z-index: 2; top: 62px; left: 1353px;">
<img src="image.jpg">
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</div></p>

テストのために画像にボタンを付けてみました。ボタンはありましたが、クリックしてもスクロールしませんでした。私は何を間違えましたか？私が取った最初のアプローチは間違いなくうまくいったはずです。ありがとう

4

1 に答える 1

0

最初のスニペットは動的ではないため、とにかく機能しません。さらに、text-indentブロック要素のオフセットを処理する最良の方法ではありません。2つ目は、JavaScriptがスクロールしないため機能しませんが、要素に「Hello、World」を出力し<p id="demo" ...>ます。

ここを見てください：

http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizo​​ntal-page-scrolling-with-jquery/

これは、HTMLアンカーを使用した垂直スクロールの優れた方法であり、JavaScriptをサポートまたは許可していないブラウザーでも機能します。

それがあなたを助けてくれますか？

于 2013-01-23T13:25:22.420 に答える