Question

我正在开发浏览图片的应用程序。我已经使用图像外部的标准文本锚点实现了浏览机制。

现在我想在图像“内部”实现浏览机制。让我们说清楚。用户看到图像并在 onMouseOver事件上，根据指针所在图片的哪一侧，它在右侧或左侧分别显示为箭头。在 onClick事件后，在图片的右侧或左侧，用户应该能够浏览到上一个/下一个图像。没有必要单击箭头进行浏览。

现在我知道可以用Javascript实现这个功能，特别是jQuery框架有一些有趣的功能来做到这一点。我正在遵循这种方法：

为图片创建一个div容器，并将<img>标记放在里面。
定义容器内导航箭头的位置。
在 onMouseOver事件上调用一个jquery函数，将箭头图像放在第2步定义的位置。
使用一些淡入淡出功能来实现淡入淡出效果。
点击通话后，图片浏览功能已经实施。

我的怀疑主要是：

Q1）我的方法（上面列出的点）是否正确？

Q2）如何根据图像尺寸调整浏览箭头的位置？

Q3）如何让jQuery“理解”用户是 onMouseOver 还是 onClicked 到图片的左侧或右侧？

虽然所有答案都很受欢迎，但我并不是要求普通代码在我的应用程序中复制粘贴和调整，但我想知道我的方法是否正确并且有一些有用的jQuery（或任何其他JS框架）用于实现此功能的功能。

Answer 1

Q1：你的方法正朝着正确的方向发展。

Q2：使用jQuery，您可以读出元素的宽度，或者可以使用position:absolute; right:20px定位箭头元素...但是请检查Q3-＆gt;

Q3：在你的停留时，定义两个单独的divs，一个位于图像左半部分的右半部分。所以结构可能是：

<div class="image-wrapper">
   <img src="somthing.jpg"/>
   <div class="navigation-overlay">
      <div class="left-arrow></div>
      <div class="right-arrow"></div>
   </div>
</div>

如何使用图像内的淡入按钮实现图像浏览

1 个答案: