Кто-нибудь использовал / создавал столбцы таблицы "рыбий глаз"?
Кто-нибудь когда-нибудь придавал столбцам таблицы эффект «рыбьего глаза»? Я говорю о расширяющемся эффекте столбцов таблицы при наведении на них указателя мыши. Я хотел бы увидеть код, если кто-нибудь пробовал это.
Обновлено: ... или эффект аккордеона
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 8
Это не для стола, но вот эффект:
Столбцы намного сложнее, чем строки, но я бы сделал следующее:
- Примените уникальный класс CSS к каждому TD для каждого столбца
- Присоедините событие MouseIn и MouseOut
- Выберите все элементы с именем класса столбцов и примените второй класс «рыбий глаз».
- При наведении курсора удалите класс.
Обновлено: Я неправильно понял, что рыбий глаз больше похож на полосу зебры с бликами ... Сделать рыбий глаз на столбцах было бы сложно, выполните тот же процесс, который я перечислил выше, но примените анимацию к каждой ячейке вместо нового класса css.
Я думаю, что Джонатан на правильном пути. Вам понадобятся методы для поиска всех ячеек в столбце, а также смежных столбцов и строк. Я думаю, вы можете получить приличный эффект всего с тремя уровнями «масштабирования».
Хотя это не решение на основе таблиц, это быстрое подтверждение концепции, которое я разработал с помощью 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>
Это своего рода уродливый эффект, но он работает только с 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>
нет необходимости в 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>
в приведенном ниже коде используется 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>
Может быть, Magic Table - это то, что вы ищете: http://www.grvisualisation.50webs.com/examples.html