Javascript 是否有人使用/创建了“；“鱼眼”；表列？_Javascript_Jquery

Javascript 是否有人使用/创建了“；“鱼眼”；表列？

javascript jquery

Javascript 是否有人使用/创建了“；“鱼眼”；表列？,javascript,jquery,Javascript,Jquery,有人给过表列“鱼眼”效果吗？我说的是鼠标悬停在表列上时表列的扩展效果。如果有人试过这个，我想看看代码编辑：…或手风琴效果这不适用于桌子，但效果如下：列比行复杂得多，但我想这样做：对每列的每个TD应用唯一的CSS类附加一个MouseIn和MouseOut事件选择具有列类名称的所有元素，并应用第二个“fisheye”类在mouseout上，删除该类编辑：我误解了fisheye更像斑马条纹加高光…在列上做一个鱼眼会很棘手，按照我上面列出的相同过程，但对每个单元格应用一个动画，而不是一

有人给过表列“鱼眼”效果吗？我说的是鼠标悬停在表列上时表列的扩展效果。如果有人试过这个，我想看看代码

编辑：…或手风琴效果

这不适用于桌子，但效果如下：

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

对每列的每个TD应用唯一的CSS类
附加一个MouseIn和MouseOut事件
选择具有列类名称的所有元素，并应用第二个“fisheye”类
在mouseout上，删除该类

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

我认为Jonathan的思路是正确的。您需要找到列中的所有单元格以及相邻的列和行的方法。我认为只需三个级别的“缩放”就可以获得不错的效果。

虽然不是基于表的解决方案，但这是我使用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>


$（文档）.ready（函数（）{
$（“#table>div:偶”）.addClass（“行”）；
$（“#table>div:odd”）.addClass（“altrow”）；
$（“#table>div>div”）.addClass（“正常”）；
$（“div[class*='col']）。悬停(
函数（）{
var myclass=$（this.attr（“类”）；
$（“div[class*='col']”）css（“width”，“20px”）；
$（“div[class*='”+myclass+“']”）css（“width”，“80px”）.css（“overflow”，“auto”）；
}, 
函数（）{
$（“div[class*='col']）.css（“宽度”，“40px”）.css（“溢出”，“隐藏”）；
}
)
});
.行{
背景色：#eee；
浮动：左；
}
阿尔特罗先生{
背景色：#fff；
浮动：左；
}
.正常{
宽度：40px；
溢出：隐藏；
浮动：左；
填充：3倍；
文本对齐：居中；
}
专栏1
专栏2
第3栏


专栏1
专栏2
第3栏


专栏1
专栏2
第3栏

这是一种丑陋的效果，但只适用于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>


桌子{
宽度：150px；
高度：150像素；
}
tr{
高度：20px；
}
tr：悬停{
高度：30px；
}
运输署{
宽度：20px；
边框：1px纯黑；
文本对齐：居中；
}
td:悬停{
宽度：30px；
}
1.
2.
3.
4.
1.
2.
3.
4.
1.
2.
3.
4.
1.
2.
3.
4.

不需要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>


例子
运输署{
边框：薄黑色实心；
宽度：3em；
高度：3em；
}
td:悬停{
背景色：红色；
宽度：5em；
/*身高：5公分*/
/*如果还希望缩放行，请取消对上述内容的注释*/
}
1.
2.
3.
4.
1.
2.
3.
4.
1.
2.
3.
4.
1.
2.
3.
4.

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

CSS:

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>


第1行
1descZ
2德斯库
3descI
4descO
第2行
1descZ
2德斯库
3descI
4descO

也许您正在寻找的是Magic Table：

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