слайд div на изображении - PullRequest
1 голос
/ 19 августа 2009

У меня очень простой div (1). Мне нужно другой простой div (2) медленно скользить по нему (1) сразу страница загружается Снизу вверх

<div id="slideshow" class="reb_darkblue_bg">
<img alt="Slideshow" src="images/slideshow_home_1.jpg"/>
</div>

<div class="slidingdiv" style="background:black; color:white;">Pricing</div>

В интернете примеры слишком запутанные. Мой английский не самый лучший, извините за язык.

Ответы [ 3 ]

1 голос
/ 19 августа 2009

Я думаю, что вы пытаетесь сделать анимированный «скользящий эффект». Взгляните на библиотеку jQuery , а также посмотрите на эффект переключения: http://docs.jquery.com/Effects/toggle

0 голосов
/ 19 августа 2009

позиция SlivDIV абсолютно и используйте этот код:

<script type="text/javascript">
$(document).ready(function(){
    var p=$("#slideshow").offset();
    $("#slidingdiv").css(p);
    $("#slidingdiv").show('slide',{direction:'down'},5000);
});
</script> 
0 голосов
/ 19 августа 2009

Если вы хотите, чтобы внутренний div скользил снизу вверх, вам нужно расположить его абсолютно в родительском контейнере, например так:

.container {position:relative; height:50px; width:640px; border:1px solid #333;}
.childSlider {position:absolute; bottom:0; left:0; width:640px; display:none;}

<div class="container">
  <div class="childSlider"><img src="file.jpg" /></div>
</div>

$(function(){
  $(".childSlider").slideDown();
  $(".container").click(function(){
    $(this).find(".childSlider").slideToggle();
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...