我遇到过wunderlist.com网站，并爱上了“了解更多有关奇妙 list ”标题下方图像上类似缩放的弹出窗口。 我很乐意在我的网站上实现类似的功能。
有人能告诉我这是怎么做到的吗？我尝试进行逆向工程，但没有成功:) 我不希望有完整的现成代码，但也许有一些关于如何使用 CSS/jQuery 实现这一点的指南。
或者也许你知道一些我可以使用的 jQuery 插件？
最佳答案
他们正在使用所有 CSS。真的很简单......我会为你编写一个完整的 js fiddle 示例，但我没有时间，所以我将列出你需要的不同元素以及它们如何交互。
- 首先，大图像只是一个带有设置背景图像的 div 尺寸。
- 圆形图像本身是由一张大图像生成的，该大图像包含一个点上的所有圆形，这称为 Sprite 。这些圆圈只是带有背景图像和背景定位的 div，用于将 Sprite 图像中的正确圆圈定位在框内。
- 文本框本身也是带有标准 H2 和 P 文本标签的 div。
- 一切都绝对定位，以实现正确的布局。
- 小圆圈是具有
:hover状态的 div，它们绝对位于各自的目标区域上方。 :hover上的动画是通过使用 css3 过渡和 css3 变换来实现的。
这应该可以帮助您入门。
如果您有疑问，请发表评论。
有时间玩玩:http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/
关于javascript - 像 wunderlist.com 上的动画弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15684451/