2

我遇到了wunderlist.com网站，并且爱上了他们在标题“了解更多关于 Wunderlist”下方的图像上的类似缩放的弹出窗口。我很想在我的网站上实现这样的东西。

有人可以告诉我这是怎么做到的吗？我尝试进行逆向工程，但没有运气 :) 我不希望得到完整的代码，但也许有一些关于如何使用 CSS/jQuery 实现这一目标的指南。

或者你知道一些我可以使用的 jQuery 插件？

4

4 回答 4

1

尝试查看两个主要方面：打开您选择的检查器工具，看看会发生什么body.login .feature ......更具体地说，看看它transform: scale和opacity:hover 时的值会发生什么。

提示：过渡主要在他们身上。

仍然在您的检查器中，将比例更改为 (1)，将不透明度更改为 1。它如何从一种状态平滑地到达另一种状态由transition属性决定。

这并不是要告诉您确切的实现方法，而是要让您上路:)

于 2013-03-28T14:40:55.753 回答
1

他们使用所有的 CSS。真的很简单.. 我会为你编写一个完整的 js fiddle 示例，但我没有时间，所以我将列出你需要的不同元素以及它们如何交互。

  1. 首先，大图像只是一个带有设置尺寸的背景图像的 div。
  2. 圆形图像本身是从一个包含所有圆圈的大图像生成的，这称为精灵。圆圈只是带有背景图像和背景定位的 div，用于在精灵图像的框内定位正确的圆圈。
  3. 文本框本身也是带有标准 H2 和 P 文本标签的 div。
  4. 一切都是绝对定位，以实现正确的布局。
  5. 小圆圈是具有:hover绝对定位在其各自目标区域上的状态的 div。
  6. :hover通过使用 css3 过渡和 css3 变换来实现动画。

这应该让你开始。

如果您有任何问题，请发表评论。

有时间找点乐子：http: //khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/

于 2013-03-28T14:45:22.720 回答
1

其实没那么难。Wunderlist 团队甚至让它变得更容易。他们有一个大的精灵图像，缩放后的图像被裁剪并准备好圆角、边框和阴影。你可以在这里看到它：https ://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png

您所做的是在鼠标悬停时显示一个半透明的黑色背景（可以是位置：固定为全宽和全高）。然后你创建一个元素，将精灵作为背景图像（更好的是，在你的 css 中准备好一个类并将其附加到新创建的元素中）。将位置设置为悬停元素的位置。

当添加到 dom 时，为元素的变换比例设置动画（从 scale(.24) 之类的东西开始）。

于 2013-03-28T14:47:40.790 回答
0

好吧，因为您尝试了逆向工程。我会试着引导你沿着这条路走。

只有一个具有 id覆盖的 div会改变它的位置和内容，悬停在任何具有类feature的 div 上。从他们的应用程序 js进一步工作，它没有被缩小。

在这种情况下弹出的内容是移动到不同位置的图像。

于 2013-03-28T14:46:50.310 回答