2010-02-18 3 views
1

Есть ли какие-либо jQuery плагины, которые могут что-то сделать: Acer Site?jQuery plug-in clone

У меня есть клиент, который хочет эту функциональность и не зная, что это даже называется, значит, я не могу это сделать Google, а мой javascript недостаточно хорош, чтобы клонировать его.

ответ

0

Вы имеете в виду элементы, которые скользят вправо? Вы можете просто использовать метод animate. Поляйте элементы div рядом друг с другом, где начальная ширина элементов слева равна нулю. Чтобы показать окно, вы анимируете элемент с элементом, а затем покажете содержимое внутри него.

Пример:

<style type="text/css"> 

.slideBox { float: left; margin: 2px; width: 0; height: 200px; background: #eee; } 
.slideBox .content { display: none; margin: 10px; background: #ccc; } 
#first { width: 100px; } 
#first .content { display: block; } 

</style> 

<script type="text/javascript"> 

$(function(){ 
    $('#first').click(function(){ 
    $('#second').animate(
     { width: '100px' }, 
     {complete:function(){ $('#second .content').css('display','block'); }} 
    ); 
    }); 
    $('#second').click(function(){ 
    $('#third').animate(
     { width: '100px' }, 
     {complete:function(){ $('#third .content').css('display','block'); }} 
    ); 
    }); 
    $('#third').click(function(){ 
    $('#fourth').animate(
     { width: '100px' }, 
     {complete:function(){ $('#fourth .content').css('display','block'); }} 
    ); 
    }); 
}); 

</script> 

<div class="slideBox" id="fourth"><div class="content">fourth</div></div> 
<div class="slideBox" id="third"><div class="content">third</div></div> 
<div class="slideBox" id="second"><div class="content">second</div></div> 
<div class="slideBox" id="first"><div class="content">first</div></div> 
+0

Имеет смысл. Я сразу переусердствовал, думая об этом как о динамическом, при создании ящиков при необходимости. –