JQuery эффект размытия изображения в div? - PullRequest
Новая
       45

JQuery эффект размытия изображения в div?

2 голосов
/ 05 апреля 2010

Считайте, что у меня есть three images и one bannerDiv .... При начальной загрузке страницы я должен показать первое изображение, а по истечении некоторого времени произнесите 300ms, я должен показать второе изображение и наоборот .... Я долженblur первое изображение и показ второго изображения .... Любое предложение, как это можно сделать с помощью jquery ... 

<div Id="BannerDiv">
<img src="mylocation" alt="image1"/>
<img src="mylocation" alt="image2"/>
<img src="mylocation" alt="image3"/>
</div>

и моя функция jquery: 

<script type="text/javascript">

         $(document).ready(function() {
     //how to show first image and blur it to show second image after 300 ms
          });
</script>

РЕДАКТИРОВАТЬ:

1-е изображение исчезает после 300ms и показывает 2-е изображение2-е изображение исчезает после 300ms и показывает 3-е изображение3-е изображение исчезает после 300ms и показывает 1-е изображение ....

Второе редактирование:

Я использовал ник, но ничего не произошло .. 

<body>
    <form id="form1" runat="server">
    <div>
       <div Id="BannerDiv">
            <img src="Images/banner3.jpg" alt="image1" width="954" height="327"/>
            <img src="Images/ban_main_25.jpg" alt="image2" width="954" height="327"/>
            <img src="Images/banner_25.jpg" alt="image3" width="954" height="327"/>
        </div>
    </div>
    <script type="text/javascript">
        $(function() {
            $('#BannerDiv > :first').show();
            setTimeout(rotate, 1000);
        });

        function rotate() {
            var c = $('#BannerDiv > :visible').css({ 'z-index': 2 }).fadeOut(2000, function() {
                setTimeout(rotate, 300);
            }).next().css({ 'z-index': 1 }).show();
            if (c.length == 0) $('#BannerDiv > :first').css({ 'z-index': 1 }).show();
        }
     </script>
    </form>
</body>

и css 

 #BannerDiv {width: 954px; height: 327px;}
 #BannerDiv img {position: absolute; width: 954px; height: 327px; display: none;}​

Ответы [ 3 ]

2 голосов
/ 05 апреля 2010

Вот быстрый способ сделать это: 

$(function() {
    $('#BannerDiv > :first').show();
    setTimeout(rotate, 1000);
});

function rotate() {
  var c = $('#BannerDiv > :visible').css({ 'z-index': 2 }).fadeOut(2000, function() {
    setTimeout(rotate, 3000);
  }).next().css({ 'z-index': 1 }).show();
  if(c.length == 0) $('#BannerDiv > :first').css({ 'z-index': 1 }).show();
}
​

Для соответствия вам потребуется следующий CSS-код (настройте размеры по вашему): 

#BannerDiv {width: 400px; height: 200px;}
#BannerDiv img {position: absolute; width: 400px; height: 200px; display: none;}​

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

0 голосов
/ 05 апреля 2010 
(function($){
$.fn.showdelay = function(){
    var delay = 0;
    return this.each(function(){
        $(this).delay(delay).fadeIn(100);
        delay += 300;
    });
};
})(jQuery);

Использование: $("#BannerDiv").children().showdelay();

может быть немного элегантнее.

0 голосов
/ 05 апреля 2010

Вы можете использовать setInterval() для повторного действия по времени: 

$(function() {
  setInterval(300, cycle_images);
});

function cycle_images() {
  var banner = $("#BannerDiv");
  if (banner.is(":hidden")) {
    banner.children().hide().end().show();
  }
  var images = banner.children("img");
  var visible = images.filter(":visible");
  var index = images.index(visible);
  var next = (index + 1) % images.length;
  visible.fadeOut(100, function() {
    images[next].fadeIn(100);
  });
}

Что касается того, скрывать ли баннер и / или изображения с помощью CSS (внешнего или встроенного), я лично считаю, что в целом лучше делать это таким образом, потому что в противном случае это может привести к заметному мерцанию ready() событие задерживается по любой причине.

...