Question

有人知道这个网站的眼球是如何设计的吗？这是javascript（也许是jQuery），还是简单的HTML5和CSS？我真的不明白你是如何在这个形状中得到一个小图像，得到它的onhover方法，设置一个新的图片，然后让它可点击。这是按钮吗？

Answer 1

他们使用一张图片作为背景（见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

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

Answer 2

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

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

Answer 3

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

在网站上真的很酷的JavaScript或CSS功能

3 个答案: