Цитата:
Сообщение от igsavenko
хотелось бы динамику внести
|
Ну какая-никакая, а динамика... :lol:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
position: relative;
width: 100px;
height: 120px;
background-color: blue;
}
ul {
position: absolute;
color: #ffffff;
list-style: none;
}
li {
height: 30px;
cursor: pointer;
}
#line {
position: absolute;
width: 100%;
height: 30px;
background-color: red;
}
</style>
<script type="text/javascript">
function Go(Obj) {
var y=+document.getElementById('line').offsetTop
var ys=+Obj.offsetTop
var inc=(ys-y>0)? 1: -1
setTimeout(function(){IncLine(y,ys,inc)},1)
}
function IncLine(Y,Ys,Inc) {
var inc=Inc*2
document.getElementById('line').style.top=Y+'px'
if (Y==Ys) {
// Переход куда нужно или запуск чего-то
return
}
Y=(Inc==1 && Y+inc>Ys)? Ys: Y+inc
Y=(Inc==-1 && Y+inc<Ys)? Ys: Y+inc
setTimeout(function(){IncLine(Y,Ys,Inc)},1)
}
</script>
</head>
<body>
<div id='container'>
<div id='line'></div>
<ul>
<li onclick='Go(this)'>Item 1</li>
<li onclick='Go(this)'>Item 2</li>
<li onclick='Go(this)'>Item 3</li>
<li onclick='Go(this)'>Item 4</li>
</ul>
</div>
</body>
</html>
Набросал в ИЕ7... Т.ч. просто как идея. :) |
