0

我曾经使用 CSS 创建了一个图片库，它执行了以下操作：

  1. 创建了一个缩略图库
  2. 创建了一个 div，其中放置了 1x1 像素图像
  3. 在缩略图的鼠标悬停时，这些 1x1 像素的图像会扩展以适应 div 大小，高度与长度相关。
  4. 到目前为止我的代码：

php:

echo '<div id="thumbnails">';
$files = glob("11-09-2012/*.*");
for ($i=1; $i<count($files); $i++)
{       //creating thumbnails
   $num = $files[$i];
   echo '<img src="'.$num.'" height="50px" id="thumb'.$files[$i].'"></img>';
};


   echo '</div><div id="gallery">';
   for ($i=1; $i<count($files); $i++)
{       //creating 1x1
   $num = $files[$i];
   echo '<img STYLE="position:absolute" src="'.$num.'" height="1px" width="1px" id="img'.$files[$i].'"></img>';
};
echo '</div>';

CSS：

#gallery {
margin: 0 auto; 
border-style: solid;
border-width: 3px;
border-color: #fff;
width: 800px;  
height: 600px;  
}

现在我不知道该去哪里 - 感谢任何帮助 - 替代方法也是如此。

最好的问候 - 杰斯珀

4

2 回答 2

2

一个天真的程序员可能会推荐 jQuery，或者为每个单独的图像附加一个事件。以下是大男孩的做法：

(function() {
  var box = document.getElementById('thumbnails'),
      handler = function(e) {
        e = e||window.event;
        var tar = e.target || e.srcElement,
            type = e.type, id = tar.id, m, img;
        if( (m=id.match(/^thumb(.*)$/)) && (img=document.getElementById('img'+m[1]))) {
          img.style.height = img.style.width = type == "mouseover" ? "auto" : "1px";
        }
      };
  if( typeof box.attachEvent != "undefined") {
    box.attachEvent('onmouseover',handler);
    box.attachEvent('onmouseout',handler);
  }
  else {
    box.addEventListener('mouseover',handler);
    box.addEventListener('mouseout',handler);
  }
})();

您需要对 HTML 进行的唯一更改是width="1px" height="1px"从图像中删除 ，而是添加width:1px;height:1px;max-width:800px;max-height:600px;到图像的样式中。这在 CSS 文件中会更好：

#gallery>img {
    position: absolute;
    left: 0; top: 0;
    width: 1px; height: 1px;
    max-width: 800px;
    max-height: 600px;
}
于 2012-09-11T14:10:24.627 回答
0

http://jsfiddle.net/yDUMT/

jsfiddle 显示了 onMouseOver 与 javascript 函数一起使用，以在鼠标悬停时放大 1px，以及 onMouseOut 与 javascript 函数一起使用，以在鼠标移出缩略图时将放大的 1px 图像缩小。

于 2012-09-11T14:25:57.450 回答