jQuery Info кутия
09-12-2010
Кутията съдържа 5 div-a, по един за всеки линк. Всеки div има същата височина с контейнера и overflow-a е hidden. Когато кликнем на линковете, jQuery взима индекса на елемента, който е кликнат и анимира горния margin на контейнера до правилната позиция.

HTML кода
<div id="example-links">
<a href="#">Пример 1</a>
<a href="#">Пример 2</a>
<a href="#">Пример 3</a>
<a href="#">Пример 4</a>
<a href="#">Пример 5</a>
</div>
<div id="example-content-container">
<div id="example-content">
<div><b>Примерно съдържание 1</b><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque varius volutpat. Etiam non neque erat, nec molestie orci. Donec a lacus ut diam semper interdum et quis magna. Donec sagittis quam sit amet dui venenatis malesuada placerat quam facilisis.</div>
<div><b>Примерно съдържание 2</b><br />Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</div>
<div><b>Примерно съдържание 3</b><br />Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</div>
<div><b>Примерно съдържание 4</b><br />Proin pretium purus ac ligula interdum varius. Mauris lobortis, risus id dapibus molestie, ipsum nunc consectetur risus, vel elementum nisi augue aliquet sapien. Phasellus vehicula purus et ante ultrices a mollis velit consectetur. Duis sapien risus, condimentum et pharetra in, sagittis quis felis. Suspendisse ornare odio non augue scelerisque volutpat. Phasellus interdum urna in erat adipiscing fringilla.</div>
<div><b>Примерно съдържание 5</b><br />Ut nisi lacus, mollis id convallis a, accumsan quis nisi. Donec tempus lacinia hendrerit. Mauris fermentum nibh ac mi bibendum laoreet. Sed faucibus libero est, pulvinar aliquet justo. Nullam nisi nisl, sollicitudin vel lobortis id, commodo ut est. Pellentesque tellus mauris, imperdiet id condimentum vitae, condimentum eget ligula. Duis ut lacus magna, non consectetur justo.</div>
</div>
</div>
<div style="clear:both"></div>


Ето и jQuery-то:

$('#example-links a').click(function(){
var index = $("#example-links a").index(this);
$('#example-content').animate({"marginTop" : -index*220 + "px"}); // умножаване на height+top/bottom padding/margin/border
return false;
});


И CSS-a за примера, който дадох:

#example-links {
border: 1px solid #ccc;
border-bottom: none;
float: left;
width: 200px;
}
#example-links a {
border-bottom: 1px solid #ccc;
display: block;
font-size: 17px;
height: 39px;
line-height: 39px;
padding-left: 10px;
}
#example-links a:focus {
outline: 0;
}
#example-links a:hover {
background-color: #ddd;
}
#example-content-container {
border: 1px solid #ccc;
border-left: none;
height: 200px;
overflow: hidden;
width: 350px;
}
#example-content div {
height: 200px;
padding: 10px;
}


Същия ефект, може да постигнете дори, ако искате кутията да се анимира само при минаване на мишката отгоре (т.е. чрез hover)

$('#example-links a').hover(function(){
var index = $("#example-links a").index(this);
$('#example-content').animate({"marginTop" : -index*220 + "px"});
});



Демо
Изтегли


Източник


/ Трябва да сте регистриран за да напишете коментар /
От: kriss
19:22 11-12-2010
супер
От: r3nt3r
22:26 11-12-2010
супер но има малко да се фиксне защото я вижте от демото "Пример 2" и вижте текста не е показан целия иначе си е просто перфектно
От: Fakeheal
22:53 11-12-2010
@r3nt3r, прав си може да се сложи overflow:scroll; :)
От: HeLL_OwNeR
16:46 12-12-2010
готино ! :)
От: SpiroLuz
19:25 31-12-2010
Браво браво хубаво е може да му се сложи малко стил и хоп едно потрфилио.. :)
1