最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Has anyone usedcreated "fisheye" table columns? - Stack Overflow

programmeradmin1浏览0评论

Has anyone ever given table columns the "fisheye" effect? Im talking about an expanding effect of the table columns when hovering the mouse over them. I'd love to see some code if anyone has tried this.

EDIT: ...or an accordian effect

Has anyone ever given table columns the "fisheye" effect? Im talking about an expanding effect of the table columns when hovering the mouse over them. I'd love to see some code if anyone has tried this.

EDIT: ...or an accordian effect

Share Improve this question edited Oct 11, 2008 at 4:03 dittonamed asked Oct 11, 2008 at 1:16 dittonameddittonamed 9302 gold badges9 silver badges17 bronze badges
Add a ment  | 

8 Answers 8

Reset to default 4

It's not for a table, but here is the effect:

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

While not a table-based solution, this is a quick proof-of-concept I whipped up using JQuery just to see if I could do a column based accordion effect. Maybe it can give you some inspiration...

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

no javascript is necessary this took me only a few minutes to work out

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3/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;*/
                /*unment 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>

Maybe Magic Table is what you're looking for: http://www.grvisualisation.50webs./examples.html

Columns are a whole lot trickier than rows, however I'd do like this:

  • Apply a unique CSS class to each TD per column
  • Attach a MouseIn and MouseOut event
  • Select all elements with the columns class name, and apply a second "fisheye" class
  • On mouseout, remove the class.

EDIT: I misunderstood fisheye to be more like zebra striping with highlights...To do a fisheye on the columns would be tricky, do same process as I listed above, but apply an animation to each cell instead of a new css class.

I think Jonathan is on the right track. You'd need methods to find all cells in a column, as well as adjoining columns and rows. I think you could get a decent effect with just three levels of "zoom."

This is kind of ugly effect but works only with CSS's :hover you can use some JS to make it look smoother:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3/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>

the code below uses css to make cell wider on :hover, and jquery to toggle (display) additional content in the given cell... and toggle it again (hide) when you are no longer hovering the cell.

http://jsfiddle/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);
    });
});

works on a simple table 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>
发布评论

评论列表(0)

  1. 暂无评论