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

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，该 ID 已被识别，因此可以切换 src，我不确定该怎么做 -- 另外我不知道这对不同的显示尺寸/屏幕 chop 有何 react 。虽然 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); 
});

这将对每张图片使用react，甚至是在页面加载后添加的图片:

$(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 的背景来对背景执行此操作，类似于上述处理程序。