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

Question

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

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

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

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

Answer 1

这是一个我认为可以为您工作的开源脚本（或者至少经过轻微修改）

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

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

编辑：

我意识到上面的脚本可能不能很好地处理文本。不幸的是，在 javascript 中模糊文本并不容易。使用 canvas 元素可能是可能的，但我无法在快速的谷歌搜索中找到任何东西，这可能与旧浏览器不兼容。

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

Answer 2

我不确定您是否可以在 Javascript 中执行此操作...

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>