如何确定网站用于特定 UI 效果的内容？

Posted 2023-05-08

【中文标题】如何确定网站用于特定 UI 效果的内容？

【英文标题】：How to determine what a site is using for specific UI effects?

【发布时间】：2012-10-21 21:35:17

【问题描述】：

我正在根据我们公司网站的另一个设计/UI 重新设计一个网站

负责我应该为我的重新设计建模的网站的 Web 开发人员下周正在休假，但我想使用他的一种 UI 效果。

我似乎无法弄清楚他在使用什么来实现悬停渐变效果，这让我觉得他使用的不是 CSS3，而是一些 jQuery 库。

编辑：我使用 firebug 尝试弄清楚他们在做什么但没有成功。

Here 是我正在查看的内容。它是在右侧边栏中的几个元素上使用的淡入淡出效果。班级是fadehover。

感谢您帮助诊断此特定问题，但我真的很想知道我自己将来如何解决类似问题。

【问题讨论】：

使用getfirebug.com 找到它。

我已经使用 firebug 几年了，但我似乎无法弄清楚他们在这个上做了什么。

【参考方案1】：

在 main.js（第 223 行）中，我发现这是造成悬停的原因：

$("img.img-a").hover(
function() 
    $(this).stop().animate("opacity": "0", 400);
,
function() 
    $(this).stop().animate("opacity": "1", 800);
);

在fadehover div 中，有类img-a 和img-b 的图像。当光标悬停在img-a 上时，它会淡出该图像。所以我假设 img-b 使用 CSS 放在 img-a 后面。

我就是这样做的：

我使用谷歌浏览器，转到标签resources 并简单地搜索（ctrl + F / cmd + F）fadehover 类。不幸的是，除了一点 CSS 和 html，我什么都找不到，所以我选择了该 div 中的一类图像，结果是宾果！

还有其他方法可以找出答案。如果您检查该元素并用鼠标悬停，您可能会看到您的 DOM 发生变化。如果您的 DOM 发生变化，您就知道它是由 javascript 完成的。无论是 jQuery、原型还是其他框架都是另一回事。

如果 DOM 没有改变，您可以确定使用了 CSS 过渡。除非使用 Flash、SVG 或 HTML5 画布元素；)

【讨论】：

很好，但是你是怎么找到的？你搜索了什么？你用了什么？我真的很擅长用 firebug 弄清楚 CSS 效果，但是当它是 jQuery 时，我不知道如何找到它在做什么。

哇太棒了，非常感谢。你知道是否有办法在 firefox (firebug) 中做同样的事情吗？

在萤火虫中，每种语言都有多个选项卡。 HTML、CSS 和脚本。因此，首先您必须知道是否应该查看 CSS 或 Script 选项卡。如果您使用脚本选项卡，您必须首先通过单击箭头启用它，然后单击enable。然后您必须重新加载页面，该页面会加载该选项卡中的所有脚本。然后，您可以搜索您要查找的任何内容。这就是我更喜欢 Chrome 的原因，因为我可以立即搜索所有文件。无论如何，我更喜欢 Chrome 进行调试。