Jquery Nivo Slider如何轉換工作？

我想知道如何創建Jquery Nivo Slider轉換效果，而不是創建整個插件。我嘗試過使用CSS的clip屬性，但是我無法讓它創建效果，其中部分圖像逐漸消失或逐塊移出，直到下一張幻燈片顯示。Jquery Nivo Slider如何轉換工作？

如果任何人有一個大致的想法或如何使過渡效果的具體代碼，將不勝感激謝謝。

來源

2011-11-19 user701510

通用的想法如下：你的DIV的第一圖像，然後你有第二圖像，你來使用它們調整的CSS屬性

每個第二圖像DIV只是一小塊它的div的大數目與調整的背景，所以它覆蓋以前的形象，其中的一部分

用這種方法，你可以以任何你想要的任何順序產生的碎片。滑動他們，淡化他們的IM，randomally補，什麼

HTML將看起來像這樣：

<!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>

而且你還可以有另一種圖像2格，這將顯示了您已加載的所有作品後。並顯示它後摧毀所有作品

有很多方法來阻止整個JavaScript的進程至於我首先製作塊數組（div數組），然後你可以創建任意數量的效果你想要的，只是用不同的效果和不同的順序

如果NIVO採用這種方式或其他一些我不知道它們顯示，但這個工程:)

來源

2011-11-19 11:39:32 Tigra

通過谷歌就下降到這個頁面，同時尋找解決我的NivoSlider問題。

NivoSlider，基本上只是創建一些div元素作爲圖像置換，然後取圖像URL被用作對每個塊不同的背景位置的背景圖像將在後面動畫：

// 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...

下面是一個例子我很早以前就寫了：http://reader-download.googlecode.com/svn/trunk/simple-useful-jquery-slideshow_nivo-slider-like-effect.html

來源

2013-03-23 09:07:41

Jquery Nivo Slider如何轉換工作？

回答

相關問題