有没有人使用/创建过“鱼眼”表格列？答案

【问题标题】：Has anyone used/created "fisheye" table columns?有没有人使用/创建过“鱼眼”表格列？
【发布时间】：2010-09-16 15:37:42
【问题描述】：

有没有人给表格列赋予“鱼眼”效果？我正在谈论将鼠标悬停在表格列上时的扩展效果。如果有人尝试过，我很乐意看到一些代码。

编辑：...或手风琴效果

【问题讨论】：

标签： javascript jquery

【解决方案1】：

不是为了一张桌子，但效果如下：

http://safalra.com/web-design/javascript/mac-style-dock/

【讨论】：

【解决方案2】：

虽然不是基于表的解决方案，但这是一个快速的概念验证，我使用 JQuery 来看看我是否可以做基于列的手风琴效果。或许能给你一些启发……

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("#table > div:even").addClass("row");
   $("#table > div:odd").addClass("altrow");
   $("#table > div > div").addClass("normal");
   $("div[class*='col']").hover(
      function () {
            var myclass = $(this).attr("class");
            $("div[class*='col']").css("width","20px");
            $("div[class*='"+myclass+"']").css("width","80px").css("overflow","auto");
      }, 
      function () {
            $("div[class*='col']").css("width","40px").css("overflow","hidden");
      }
   )
 });
</script>
<style type="text/css">
.row{
    background-color: #eee;
    float:left;
}
.altrow{
    background-color: #fff;
    float:left;
}
.normal{
    width: 40px;
    overflow: hidden;
    float:left;
    padding :3px;
    text-align:center;
}
</style>
</head>
<body>
<div id="table">
    <div>
        <div class="col1">Column1</div>
        <div class="col2">Column2</div>
        <div class="col3">Column3</div>
    </div>
    <br style="clear:both" />
    <div>
        <div class="col1">Column1</div>
        <div class="col2">Column2</div>
        <div class="col3">Column3</div>
    </div>
    <br style="clear:both" />
    <div>
        <div class="col1">Column1</div>
        <div class="col2">Column2</div>
        <div class="col3">Column3</div>
    </div>
</div>
</body>
</html>

【讨论】：

【解决方案3】：

不需要javascript，我只花了几分钟就完成了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Example</title>
        <style type="text/css">
            td {
                border: thin black solid;
                width: 3em;
                height: 3em;
            }

            td:hover {
                background-color: red;
                width: 5em;

                /*height: 5em;*/
                /*uncomment the above if you also want to zoom the rows*/
            }
            </style>
        </head>
    <body>
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                </tr>
            </table>
        </body>
    </html>

【讨论】：

【解决方案4】：

也许 Magic Table 就是您要找的东西：http://www.grvisualisation.50webs.com/examples.html

【讨论】：

【解决方案5】：

列比行要复杂得多，但我会这样做：

为每列的每个 TD 应用唯一的 CSS 类
附加 MouseIn 和 MouseOut 事件
选择具有列类名称的所有元素，并应用第二个“鱼眼”类
鼠标悬停时，删除类。

编辑：我误解鱼眼更像是带有高光的斑马条纹......要在列上做鱼眼会很棘手，请执行与我上面列出的相同的过程，但将动画应用于每个单元格而不是新的 css类。

【讨论】：

【解决方案6】：

我认为乔纳森走在正确的轨道上。您需要方法来查找列中的所有单元格，以及相邻的列和行。我认为只需三个级别的“缩放”即可获得不错的效果。

【讨论】：

【解决方案7】：

这是一种丑陋的效果，但只适用于 CSS 的 :hover 你可以使用一些 JS 使其看起来更平滑：

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  <style>
    table{
      width: 150px;
      height: 150px;
    }
    tr{
      height: 20px;
    }
    tr:hover{
      height: 30px;
    }
    td{
      width: 20px;
      border: 1px solid black;
      text-align:center;
    }
    td:hover{
      width: 30px;
    }

  </style>

  </head>

  <body>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
  </body>
  </html>

【讨论】：

【解决方案8】：

下面的代码使用 css 使单元格在 :hover 上变宽，并使用 jquery 切换（显示）给定单元格中的其他内容...并在您不再悬停单元格时再次切换（隐藏）它。

http://jsfiddle.net/berteh/QDhcR/12/

CSS：

 td {
     border: thin black solid;
     width: 3em;
 }
 td:hover {
     background-color: YellowGreen;
     max-width: 5em;
     font-size: 130%;
 }

Javascript：

$(document).ready(function() {
    $('td').hover(function () {
        $(this).find('.desc').toggle(300);
    });
});

适用于简单的 HTML 表格：

<table>
  <tr>
        <th>row1</th>
        <td>1<div class="desc">descZ</div></td>
        <td>2<div class="desc">descU</div></td>
        <td>3<div class="desc">descI</div></td>
        <td>4<div class="desc">descO</div></td>
    </tr>

  <tr>
        <th>row2</th>
        <td>1<div class="desc">descZ</div></td>
        <td>2<div class="desc">descU</div></td>
        <td>3<div class="desc">descI</div></td>
        <td>4<div class="desc">descO</div></td>
    </tr>
</table>

【讨论】：