javascript - 如何使用 html/css 使页面在 MouseRelease 上移动？

Question

我有一个网站，我希望它这样做:当我点击页面左侧的图片时，页面向后移动，当我点击右侧的图片时，页面向前移动.我已经正确设置了所有内容，所以我尝试使用 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>

但这并没有给我任何结果。所以我尝试使用 w3Schools 的 javascript onmouseclick 示例:

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>

为了测试它，我尝试将按钮放在图像上。按钮在那里，但当我点击它时它没有滚动。我做错了什么？看来我采用的第一种方法肯定有效。谢谢

Answer 1

您的第一个代码段无论如何都不起作用，因为它不是动态的。另外，text-indent不是处理 block 元素偏移量的最佳方式。第二个行不通，因为 JavaScript 不会滚动，但会向 <p id="demo" ...> 输出“Hello, World”元素。

最好看看这里:

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

这是一种使用 HTML anker 进行垂直滚动的好方法，它甚至可以在不支持或不允许 JavaScript 的浏览器中使用。

对你有帮助吗？