1. 首頁
  2. 問答
  3. 有沒有人使用/創建「魚眼」表列？

有沒有人使用/創建「魚眼」表列？

2008-10-11 14 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

相關問題

 相關問題