垂直文本菜单上的模糊鱼眼效果

Question

我正在寻找现有的脚本，这些脚本将通过模糊文本并根据鼠标指针缩放来为垂直文本菜单设置动画。

我正在尝试完成这些操作：

1. 鼠标悬停时类似 OS X 的移动可以“放大”和缩小文本
2. 在未对焦的状态下，文字会变得模糊
3. 当用户将指针移近文本时，文本会锐化。

这是一个 Flash 示例 这演示了一些效果，但我确实更喜欢使用 JavaScript，而不是自然使用“向下”、“向上”和“选择”按钮。

Answer 1

我不确定你能用 JavaScript 做到这一点......

Answer 2

这是一个开源脚本，我认为它可以为您工作（或者至少在进行细微修改后）

http://marcgrabanski.com/pages/code/fisheye-menu

以及使用它的教程：http://simply-basic.com/tools/fisheye-menu-for-your-website/

编辑：

我意识到上面的脚本可能不能很好地处理文本。不幸的是，在 JavaScript 中模糊文本并不容易。也许可以使用 canvas 元素，但我无法在快速的 Google 搜索中找到任何内容，而且这可能与旧版浏览器不兼容。

这是另一个对列表中的文本项具有鱼眼效果的脚本： http://aleph-null.tv/article/20080522-1839-265.xml/Text-based-Fish-Eye-Effect. 。这可能更接近您正在寻找的内容，但它绝对不那么平滑，并且不允许您像 Flash 那样模糊文本。

Answer 3

这不是这个老问题的严格答案，但今天你可以使用 CSS3 轻松实现类似的东西（无需任何 javascript）：

.fancy-bar {
    height: 80px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
}

.fancy-bar .item {
    display: inline-block;
    margin: 5px;
}

.fancy-bar .item .ball {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.fancy-bar .item-black .ball {
    background-color: black;
}

.fancy-bar .item-red .ball {
    background-color: red;
}

.fancy-bar .item-green .ball {
    background-color: green;
}

.fancy-bar .item-brown .ball {
    background-color: brown;
}

.fancy-bar .item-orange .ball {
    background-color: orange;
}

.fancy-bar .item:hover .ball {
    width: 60px;
    height: 60px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.fancy-bar .item .title {
    text-align: center;
    font-size: 11px;
    font-family: sans-serif;
    color: #ccc;
    text-shadow: #777 0px 0px 2px;
    opacity: 0.8;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s;
}

.fancy-bar .item:hover .title {
    font-size: 13px;
    opacity: 1;
    text-shadow: none;
}

.fancy-bar .item-black:hover .title {
    color: black;
}

.fancy-bar .item-red:hover .title {
    color: red;
}

.fancy-bar .item-green:hover .title {
    color: green;
}

.fancy-bar .item-brown:hover .title {
    color: brown;
}

.fancy-bar .item-orange:hover .title {
    color: orange;
}

<div class="fancy-bar">

<div class="item item-black">
  <div class="ball"></div>
  <div class="title">First</div>
</div>

<div class="item item-red">
  <div class="ball"></div>
  <div class="title">Second</div>
</div>

<div class="item item-green">
  <div class="ball"></div>
  <div class="title">Third</div>
</div>

<div class="item item-brown">
  <div class="ball"></div>
  <div class="title">Fourth</div>
</div>

<div class="item item-orange">
  <div class="ball"></div>
  <div class="title">Fifth</div>
</div>
  
</div>