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不是处理块元素偏移的最佳方法。第二个不能工作，因为JavaScript不会滚动，而是输出'Hello，World'到<p id="demo" ...>元素。

最好看看这里：

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

这是使用HTML ankers进行垂直滚动的一种很好的方式，它甚至适用于不支持或允许JavaScript的浏览器。

可以帮助你吗？

如何使用html / css将页面移动到onMouseRelease？

1 个答案: