Jak działają przejścia Jquery Nivo Slider?

Zastanawiam się, jak utworzyć efekt przejścia Jquery Nivo Slider, nie tworząc całej wtyczki. Próbowałem odtwarzać właściwość CSS o wartości clip, ale nie udało mi się uzyskać efektu, w którym część obrazu zanika lub przesuwa się blok po bloku, aż do następnego pokazu slajdów.Jak działają przejścia Jquery Nivo Slider?

Jeśli ktoś ma ogólny pomysł lub konkretny kod, jak wprowadzić efekty przejścia, byłby wdzięczny dzięki.

Źródło

2011-11-19 user701510

Ogólny pomysł jest następujący: pan dział z pierwszego obrazu, a następnie masz dużą liczbę div z drugiego obrazu, ich tarło dostosowanie właściwości CSS

Każda sekunda div obraz jest tylko mały kawałek tego z dopasowanym tłem, więc nakłada poprzedni obraz, część z niego

Za pomocą tej metody możesz odradzać się części w dowolnej kolejności z dowolnym efektem. Przesuń je, znikną je im, randomally wypełnić, coś

HTML będzie wyglądać następująco:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title></title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script> 
    <style type="text/css"> 
    .first{ 
     height:500px; 
     width:500px; 
     position: absolute; 
     background:url(1.jpg); 
     z-index: 2; 

    } 

    .second_part1{ 
     height:50px; 
     width:50px; 
     position: absolute; 
     background:url(2.jpg) 0 0; 
     z-index: 2; 

    } 

    .second_part2{ 
     height:50px; 
     width:50px; 
     position: absolute; 
     background:url(2.jpg) -50px 0; 
     left:50px; 
     z-index: 2 
    } 

    .second_part3{ 
     height:50px; 
     width:50px; 
     position: absolute; 
     background:url(2.jpg) -200px -150px ; 
     left:200px;; 
     top:150px; 
     z-index: 2 
    } 
</style> 
</head> 
<body> 
    <div class="first"> 
    </div> 
    <div class="second_part1"> 
    </div> 
    <div class="second_part2"> 
    </div> 
    <div class="second_part3"> 
    </div> 
</body> 
</html>

I ty też może mieć inny div Image2, który zostanie pokazany w górę po załadowaniu wszystkie kawałki . I zniszcz wszystkie elementy po ich wyświetleniu.

Istnieje wiele sposobów na wprowadzenie całego procesu w javascript . Jeśli chodzi o mnie, najpierw utwórz tablicę elementów (tablicę elementów div), a następnie utwórz dowolną liczbę efektów chcesz, po prostu poprzez umieszczanie ich z różnymi efektami i innej kolejności

ja nie wiem, czy Nivo wykorzystuje ten sposób, albo jakiś inny, ale to działa :)

Źródło

2011-11-19 11:39:32 Tigra

wystarczy spadła na tej stronie przez Google podczas znalezienia rozwiązania mój problem z NivoSlider.

NivoSlider, w zasadzie po prostu stworzyć jakiś element div jako zamiennik obrazu, a następnie podjąć adres URL, który ma być używany jako tło obrazu z innej pozycji tła dla każdego z elementów, które będą animowane później:

// Set the slices size 
var slice_w = $slider.width()/config.slices, 
    slice_h = $slider.height(); 

// Build the slices 
for (var i = 0; i < config.slices; i++) { 
    $('<div class="slice" />').css({ 
     'position':'absolute', 
     'width':slice_w, 
     'height':slice_h, 
     'left':slice_w*i, 
     'z-index':4, 
     'background-color':'transparent', 
     'background-repeat':'no-repeat', 
     'background-position':'-' + slice_w*i + 'px 0' 
    }).appendTo($slider); 
} 

// Change the background image when slideshow starts from here... etc etc...

Oto przykład Stworzyłem dawno temu: http://reader-download.googlecode.com/svn/trunk/simple-useful-jquery-slideshow_nivo-slider-like-effect.html

Źródło

2013-03-23 09:07:41

Jak działają przejścia Jquery Nivo Slider?

Odpowiedz

Powiązane problemy