1. 首页
  2. 问答
  3. 有没有人使用/创建“鱼眼”表列？

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

2008-10-11 17 views

回答

0

列比行麻烦一大堆，但是我ð这样做：

  • 应用独特的CSS类每列
  • 每个TD附上MouseIn和Mo useOut事件
  • 选择所有具有列类名称的元素，并应用第二个“鱼眼”类
  • 在鼠标移出时，移除该类。

编辑：我误解了鱼眼镜头到是更像斑马条纹与亮点......要做到在列的鱼眼镜头将是棘手的，做相同的过程，我上面列出，但应用动画的每个细胞，而不是一个新的CSS类。

来源

2008-10-11 01:59:38 FlySwat

0

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

来源

2008-10-11 07:53:37

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>

来源

2008-10-11 08:38:43 Wayne

0

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

来源

2008-10-13 06:04:32 AquilaX

1

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

来源

2008-10-14 20:18:37 GameFreak

0

下面的代码使用CSS，使细胞在更广泛的：hover和jQuery的切换（显示）在给定的电池附加内容...并切换它反感n（隐藏）当你不再徘徊细胞。

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：在一个简单的表格HTML

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

作品：

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

来源

2013-04-23 13:41:10 Berteh

相关问题

 相关问题