Question

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

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

Answer 1

这不是桌子，但效果如下：

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

Answer 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>

Answer 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>

Answer 4

也许Magic Table正是您所寻找的：http://www.grvisualisation.50webs.com/examples.html

Answer 5

列比行更复杂，但我会这样做：

为每列的每个TD应用唯一的CSS类
附加MouseIn和MouseOut事件
选择具有列类名称的所有元素，并应用第二个“鱼眼”类
关于mouseout，请删除该课程。

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

Answer 6

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

Answer 7

这是一种难看的效果，但仅适用于CSS：悬停你可以使用一些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>

Answer 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>

有没有人使用/创建“鱼眼”表列？

8 个答案: