jQuery放大鼠标悬停

时间:2012-03-26 13:36:10

标签: jquery macos dock flow magnify

我试图模仿类似的效果,当你滚动OSX图标停靠时它会放大图像,

我有这个标记。

<ul class="float-left">
<li class="head"></li>
<li></li>
<li></li>
<li></li>
</ul>

<ul class="float-left">
<li class="head"></li>
<li></li>
<li></li>
<li></li>
</ul>

<ul class="float-left">
<li class="head"></li>
<li></li>
<li></li>
<li></li>
</ul>

<ul class="float-left">
<li class="head"></li>
<li></li>
<li></li>
<li></li>
</ul>

默认情况下,它们都设置为200px宽和14px字体大小。

我喜欢它,所以当你将鼠标悬停在其中一个UL上时,它会将其宽度和文字大小放大约20%,然后当你鼠标移动时它会回到原来的位置。

然而我不知道该怎么称呼它,我已经搜索了封面流,放大了我能想到的任何效果,而且我无法找到预制的插件来做到这一点,是否有人知道在哪里找到一个还是快点敲门?

谢谢

3 个答案:

答案 0 :(得分:6)

答案 1 :(得分:0)

你可以做几件事......你可以看到jquery scale或使用css3 transitions,或者你可以使用像answer from Oscar

这样的库

答案 2 :(得分:0)

本文有一个插件以及如何设置它。我认为人们将此称为OSX Dock效果。

http://ndesign-studio.com/blog/css-dock-menu