PDA

Просмотр полной версии : дайте пример


Student :)
19.11.2007, 19:11
есть ли у кого пример выезжающей таблицы с сверху
на js

astrologer
20.11.2007, 02:29
Вот тебе пример на скорую руку.<html>
<head>
<title></title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<style type="text/css">
<!--
#menu table, td {
width: 150px;
background-color: #EEE;
border: #CCC solid 1px;
border-collapse: collapse;
color: #000;
text-align: center;
line-height: 20px;
}
#menu td:hover {
background-color: #DDD;
}
//-->
</style>
<script type="text/javascript">
<!--
var shift = 10;
var offset = -210;

function slider(d){
if(d){
if (window.downT) clearInterval(downT);
upT = setInterval("moveup()",1);
} else {
if (window.upT) clearInterval(upT);
downT = setInterval("movedown()",1);
}
}
function moveup(){
var s = document.getElementById('menu').style;
var t = parseInt(s.top);
if(t > offset) s.top = (t - shift)+'px';
else if(window.up) clearInterval(upT);
}
function movedown(){
var s = document.getElementById('menu').style;
var t = parseInt(s.top);
if(t < 0) s.top = (t + shift)+'px';
else if(window.downT) clearInterval(downT);
}
//-->
</script>

</head>
<body onload="document.getElementById('menu').style.top=offset+' px'">

<div id="menu" onmouseover="slider(0)" onmouseout="slider(1)" style="position:absolute;">
<table>
<tr><td>- 1 -</td></tr>
<tr><td>- 2 -</td></tr>
<tr><td>- 3 -</td></tr>
<tr><td>- 4 -</td></tr>
<tr><td>- 5 -</td></tr>
<tr><td>- 6 -</td></tr>
<tr><td>- 7 -</td></tr>
<tr><td>- 8 -</td></tr>
<tr><td>- 9 -</td></tr>
<tr><td>- - -</td></tr>
</table>
</div>
</body>
</html>

dev+
20.11.2007, 09:32
Чего сложного -- динамически меняешь style.top и style.left у объекта.