English 中文(简体)
使用仅限HTML-CSS的方式创建保持位置的覆盖<div>在缩放-调整大小后。
原标题:
  • 时间:2009-05-12 18:48:55
  •  标签:

I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.

像这样

将此翻译成中文:示例 http://img57.imageshack.us/img57/1253/showq.png

Currently I ve made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.

最佳回答

你的意思是像这个网站: 这里 ? (荷兰网站,在顶部中间列中看到照片浏览器)

浏览器缩放在像Firefox和Safari这样的浏览器中工作良好,因为它们可以缩放所有内容并重新校正像素值。要使IE(6)中的缩放工作正常,您需要使用em样式对所有内容进行样式设置。但是,无论如何,浏览器缩放对于像素数据来说都很糟糕...

Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.

问题回答

If I understand you correctly, you re trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here s an example.

基本思想是你使用了一些 div 和一些绝对/相对定位。有外部 div 将整个元素的顶部置于父元素的中心,然后有一个内部 div 将您的内容提起,以使内容居中,而不是元素的顶部。

一种流行的技术是将整个图像分成两个巨大的(大多是透明的)链接。 图片的左半部分将您带到上一张图片,右半部分将您带到下一张。

Of course you position you images of buttons appropriately and they would move around but I assume the problem you re finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).

示例:http://gizmodo.com/photogallery/dreamhomespshop/1008251500 的中文翻译为:

将鼠标悬停在图像上,您将看到它在整个区域内都是活动的。我确定它与您的实现不完全相同,但是这个概念适用。





相关问题
热门标签