带有 php 循环的 CSS onmouseover 库答案

【问题标题】：CSS onmouseover gallery with php loop带有 php 循环的 CSS onmouseover 库
【发布时间】：2012-09-11 13:46:06
【问题描述】：

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

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

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;  
}

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

最好的问候 - 杰斯珀

【问题讨论】：

我没有看到任何实际实现鼠标悬停的尝试。 What have you tried?
好吧，我想创建一个 CSS 样式，例如 .thumb[$i]:hover{ img[$i]:height 500px;这当然不起作用，因为我的 CSS 文件无法识别 php。
不幸的是，您必须等到 CSS4 才能找到解决此问题的纯 CSS 解决方案。同时，只需要一些基本的 JavaScript 就可以了。
“高度与长度有关。”？高度 = 长度
长度=宽度，哎呀。相对于长度的高度，这意味着与您设置的高度相比，图像的宽度按百分比缩小。

标签： php css image gallery

【解决方案1】：

一个天真的程序员可能会推荐 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;
}

【讨论】：

我添加了“$(document).ready” - 是/否？我尝试更正括号我尝试将脚本添加到 jquery.js 文件并调用此脚本：.. . 似乎没有任何效果：/
当一个 else alert("error");添加后，它多次发出此警报，并且似乎使我的浏览器崩溃了一段时间 x] - 所以 if(...) 不起作用，@Kolink，你能再看看它吗？
先尝试alert(id)，然后是alert(id.match(/^thumb(.*)$/))，然后是alert(img)。
对不起，我似乎错过了一些)，显然我使用attachEvent/addEventListener 的“聪明”技巧不起作用。我已经纠正了错误。 fiddle

【解决方案2】：

http://jsfiddle.net/yDUMT/

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

【讨论】：