desperate_one,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.slider{
height: 150px;
border: 1px solid #0000FF;
overflow-y: scroll;
width: 340px;
}
.slider table{
margin: 50px 0;
}
.slider table tr td{
transition: 1s;
}
.big td{
transform: scaleY(3);
}
</style>
</head>
<body>
<div class="slider">
<table style="height:300px; overflow-y:auto;">
<tr>
<td>#1</td>
<td>name1</td>
<td>desc1</td>
<td>price1</td>
</tr>
<tr>
<td>#2</td>
<td>name2</td>
<td>desc2</td>
<td>price2</td>
</tr>
<tr>
<td>#3</td>
<td>name3</td>
<td>desc3</td>
<td>price3</td>
</tr>
<tr>
<td>#4</td>
<td>name4</td>
<td>desc4</td>
<td>price4</td>
</tr>
<tr>
<td>#5</td>
<td>name5</td>
<td>desc5</td>
<td>price5</td>
</tr>
</table>
</div>
<script>
var element = document.querySelector('.slider');
var tr = element.querySelectorAll('tr');
var index = 0;
tr[index].classList.add("big");
element.onscroll = function() {
var maxScoll = 1 + element.scrollHeight - element.clientHeight;
var scroll = element.scrollTop;
tr[index].classList.remove("big")
index = tr.length * (scroll/maxScoll)|0;
tr[index].classList.add("big")
}
</script>
</body>
</html>
|