如何制作交互元素的网格？

Question

我正在尝试创建一个类似于 this 的投资组合网站，当您将鼠标悬停在它们上方时，整页的图像网格会发生变化...（another example, the third screen!）

目前我有一个粗略的解决方案，如下所示：

<img src="1.png" id="img" swap="2.png"/>

// then in JS...

$("#img").hover(function(){
    var _this = $(this);
    var current = _this.attr("src");
    var swap = _this.attr("swap");
    _this.attr('src',swap).attr('swap',current); 
}); // 

code credit

但这不是一个非常可扩展的解决方案，除了有 1000 个图像，每个图像都有自己唯一的 ID，因此可以切换 src，我不知道该怎么做 -- 另外我不知道这会对不同的显示尺寸/屏幕截断有何反应。虽然 CSS 瓦片中的背景图像很好，但它不允许交互......除非你有一个 JS 脚本跟踪光标位置（？）

！！这是我的第一个项目，任何帮助将不胜感激:)（Codecademy 是一个非常受保护的学习环境........）

Answer 1

您不必使用 id 并为每个图像创建处理程序。

这将适用于页面上当前的每张图片：

$("img").hover(function(){
  var _this = $(this);
  var current = _this.attr("src");
  var swap = _this.attr("swap");
  _this.attr('src',swap).attr('swap',current); 
});

这将对每张图片做出反应，甚至是在页面加载后添加的图片：

$(document).on('hover', 'img', function () {
  var _this = $(this);
  var current = _this.attr("src");
  var swap = _this.attr("swap");
  _this.attr('src',swap).attr('swap',current); 
});

考虑到屏幕尺寸和您的其他顾虑，您需要为图片设置固定的宽度和高度，或者确保所有图片的分辨率相似。

您也可以通过创建 div 网格然后在悬停时更改 div 的背景来对背景进行此操作，类似于上述处理程序。