在网页中鼠标悬停放大缩略图的简单方法答案

【问题标题】：Simple method of enlarging thumbnails on mouse over in a Web page在网页中鼠标悬停放大缩略图的简单方法
【发布时间】：2015-02-18 03:49:42
【问题描述】：

我的项目的页面上有许多图像缩略图。尺寸为 150x150。我们希望网站在将鼠标悬停在每个缩略图上时弹出一个完整尺寸的图像。我想知道实现这一点的最简单方法，无论是使用 HTML、JavaScript 还是 CSS，以及开始使用它并开始使用它的基本步骤。

我正在寻找一个简单的解决方案，记住我的技能是一些基本的 JavaScript 和 HTML，但我不熟悉 CSS 的工作原理。

【问题讨论】：

重复stackoverflow.com/questions/18456169/…
您的贡献不是很有帮助。您提供的链接中的示例非常复杂。我问了几个简单的答案。没有任何关于如何用我的 html 实现它的说明。
这里没有显示 html。
还有，Java != Javascript。您可能指的是 Javascript（正确的标签），但在问题文本中说“Java”。
@xenosaga01 - 我们不会为您完成这项工作。您在此处发布的问题表明您没有努力自己寻找解决方案。

标签： javascript html css mouseover

【解决方案1】：

尝试在鼠标悬停时删除宽度和高度属性，并在鼠标悬停时恢复它们。

$("img").mouseover(function() {
    this.setAttribute("data-width", this.width);
    this.setAttribute("data-height", this.height);
    this.removeAttribute("width");
    this.removeAttribute("height");
});
$("img").mouseout(function() {
    this.setAttribute("width", this.getAttribute("data-width"));
    this.setAttribute("height", this.getAttribute("data-height"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img height="25" width="25" src="https://www.gravatar.com/avatar/a5563b966d383529a65612e6590f957f?s=128&d=identicon&r=PG">

几个注意事项：

您不需要 jQuery - 但我在这里使用它是为了避免处理浏览器之间事件模型的差异
您可能不希望对每个图像都运行此程序。在这种情况下，将img 替换为一个类，例如.hoverable

更紧凑的版本，使用更多的 jQuery 函数：

$("img").hover(function() {
    $(this).attr({
        'data-width': this.width,
        'data-height': this.height
    }).removeAttr('width').removeAttr('height');
}, function() {
    $(this).attr({
        width: $(this).attr('data-width'),
        height: $(this).attr('data-height')
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img height="25" width="25" src="https://www.gravatar.com/avatar/a5563b966d383529a65612e6590f957f?s=128&d=identicon&r=PG">

【讨论】：

【解决方案2】：

我会考虑使用像灯箱这样的库 (http://lokeshdhakar.com/projects/lightbox2/) 或 jquery 缩放 (http://www.jacklmoore.com/zoom/)

【讨论】：