Javascript лента скрыта за невидимой коробкой

Question

Итак, у меня есть два изображения, одна половина ленты, а вторая - полная лента с ссылками на facebook и т. Д. Мне нужно, чтобы первая была посередине страницы, поэтому, когда вы нажимаете на нее, она будет расширяться. Я решил, что мне нужно использовать скрытый оверлей или что-то, но я совершенно новый в javascript.

Может ли кто-нибудь представить пример или помочь мне с этим?

Answer 1

Я попытался понять, что вы хотите и сказать мне, если это то, что вы имели в виду.

Вы можете обернуть два изображения в двух разделителях sepatare и затем обернуть их в div с относительным положением.

Затем вы даете двум позициям divs абсолютное.

При щелчке первого div вы меняете вторую левую позицию div (или верхнюю, если хотите вертикальный эффект).

Вот HTML с дивы только:

<div style="position: relative"> 
    <div id="frontDiv"> 
     aaaaaaaaaaaa 
    </div> 
    <div id="backDiv"> 
     bbbbbbbbbbb 
    </div> 
</div> 

Здесь CSS:

#frontDiv{ 
    height: 20px; width: 45px; 
    background: red; position: absolute; 
    z-index: 1; left: 0px; top: 0px; 
} 

#backDiv{ 
    height: 20px; width: 30px; 
    background: blue; position: absolute; 
    z-index: 0; left: 0px; top: 0px; 
} 

А вот Javascript (в JQuery):

$("#frontDiv").click(function(){ 
    $("#backDiv").animate({"left":"45px"}, 300); //{"top":"20px"} for vertical effect 
}); 

На вас конце можете расположить оболочку div везде, где хотите.

Полный пример в этой скрипке: http://jsfiddle.net/w7RVe/