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

Question

我正在尝试创建一个类似于此的投资组合网站， 当您将鼠标悬停在其上时 ， 全页图像网格会发生变化 ……（ 另一个示例，第三个屏幕！ ）

目前，我有一个粗略的解决方案，看起来像：

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

代码信用

但这不是一个非常可扩展的解决方案，除了拥有1000张图像外，每张图像都有自己的唯一ID，该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的背景，类似于上述处理程序。