1

有人知道这个网站的眼球是怎么设计的吗？这是 javascript（可能是 jQuery），还是只是 HTML5 和 CSS？我只是不明白你是如何获得这种形状的小图像，获得它的 onhover 方法，设置新图片，然后使其可点击。这是一个按钮吗？

http://animalvfx.com/work/

4

3 回答 3

6

他们使用一张图片作为背景（可在此处找到：http: //animalvfx.com/images/bg-open-close.png）。

他们只使用 CSS，他们在类上有一个悬停状态，将背景位置设置为负偏移。

基本上风格是：

.slide-holder .opener {
   width: 30px;
   height: 38px;
   overflow: hidden;
   position: absolute;
   bottom: -38px;
   background: url(../images/bg-open-close.png) no-repeat;
}

.opener:hover {
   background-position: 0 -76px;
}

实际上，您一次只能看到背景图像的一部分。因为图像状态相似，所以它似乎在向上看。

眼睛的点击事件是使用jQuery的slidedown

如果您想自己了解事情是如何工作的，您可以使用最流行的 Web 浏览器中的开发人员控制台。然后使用 HTML 检查器工具检查您感兴趣的元素。开发人员控制台通常通过按 F12 来激活。这适用于任何体面的现代网络浏览器（以及带有 Firebug 的 Firefox）

于 2012-09-01T05:17:34.700 回答
2

它是一个精灵 - http://animalvfx.com/images/bg-open-close.png - 在悬停时，背景图像从居中的眼球转移到偏移的眼球。

.opener:hover {
    background-position: 0 -76px;
}
于 2012-09-01T05:17:03.667 回答
0

我相信他压缩了他的 javascript，因此人眼看不懂，但我相信他使用了 jquery/javascript 和 css3 的组合。我相信眼睛改变外观的悬停只是一些简单的javascript来改变悬停时的图像。我确定当您单击眼睛时正在使用切换类，因为您可以在 HTML 源代码的列表中看到类更改（它最初设置为display: none）。这绝对看起来像是来自 jQuery的slideDown的工作。希望这可以帮助 ：]

于 2012-09-01T05:23:54.300 回答