馬賽克過渡效果

-1

我試圖做一個馬賽克效果，以我的傳送帶馬賽克過渡效果

這樣的例子：

http://burnmind.com/demos/mosaic/不喜歡這個100％我希望有下一個控制按鈕和以前並有圖片在HTML標籤

，但它不工作，我想幫助

這是我的工作Jsfiddle

我有做只爲上一個按鈕下一個按鈕，這將是同樣的一件事，我會接替位置與++ position--

jQuery代碼：

$(function(){ 
    var $carroussel = $('#carrousel'); 
    var $carrousselhover=$('#carrousel .hover'); 
    $carroussel.append('<div class="controls"> <span class="Previous"> <img src="http://s27.postimg.org/ip6n42rn3/previous.png"> </span> <span class="Next"> <img src="http://s27.postimg.org/6yspmoyun/next.png"> </span> </div>'); 

var $nbrimage = $('#carrousel img').length-1 ; 
    var $img = $('#carrousel img'); 

    var width = 700; 
var height = 200; 
var horizontal_pieces = 8; 
    var vertical_pieces = 6; 
    total_pieces = horizontal_pieces * vertical_pieces; 

    var box_width = width/horizontal_pieces; 
    var box_height = height/vertical_pieces; 
    var vertical_position = 0; 
elements = new Array(); 
var count ; 
count=0; 
    var $position; 
    $position=0; 
    $carroussel.width(width).height(height); 
    var $curentImage=$img.eq($position); // First image 



    var listimage= $('#carrousel ul li'); 
    var tempEl; 
    $('.controls .Next').click(function(){ 

     if($position<$nbrimage) 
     { 


      for (i=0; i<total_pieces; i++) 
    { 
     $curentImage= $img.eq($position); 
     tempEl = $('<span class="hover" id="hover-' + i + '"></span>'); 

     var horizontal_position = (i % horizontal_pieces) * box_width; 

     if(i > 0 && i % horizontal_pieces == 0) 
     { 
      vertical_position += box_height; 
     } 

     tempEl.css({'background-position': '-' + horizontal_position + 'px -' + vertical_position + 'px', 

        'background-image': 'url('+$img.eq($position).attr('src')+')'}); 
     $img.eq($position).remove(); 
     listimage.eq($position).append(tempEl); 
     elements.push(tempEl); 
    } 

     $position++; 
     $carroussel.css({'background-image': 'url('+$img.eq($position).attr('src')+')'}); 
      $('#carrousel .hover').width(box_width).height(box_height); 
     setInterval(toggleDisplay,10000); 

     } 
     else 
     { 
      $position=$nbrimage; 
     } 
     function toggleDisplay() 
{ 
if(count>=total_pieces) 
{ 
    clearInterval(0); 


} 
    else 
    { 
    var tempEl = elements[count]; 
    var opacity = tempEl.css('opacity'); 

    if(opacity == 0) 
    { 
     tempEl.animate({ opacity: 1 }) 
    } 
    else 
    { 
     tempEl.animate({ opacity: 0 }) 
    } 

    count = (count + 1) ; 
    } 


} 
    }); 


});

CSS代碼：

#carrousel{ 
    position:relative; 

    margin:0 auto; 
    z-index:2; 
} 
#carrousel ul li{ 
    position:absolute; 
top:0px; 
    left:0px; 
    list-style-type: none; 
} 
#carrousel .hover{ 
} 
.controls 
{ 
position:relative; 
    height:200px; 
    width:700px; 
    margin:0 auto; 
    z-index:1; 

} 

.controls .Next { 
position: absolute; 
right: 4px; 
top: 30px; 
} 

.controls .Previous { 
position: absolute; 
left:4px; 
top: 30px; 
} 

.controls span:hover 
{ 

    cursor:pointer; 

}

來源

2014-10-01 user3778154

演示都沒有任何按鈕來演示幻燈片改變到其他的背景，因此它可能是最好直接更改CSS背景當您單擊向前或向後。即頂部或底部的圖像。我設法做這個沒有按鈕的基本演示 - http://jsfiddle.net/7nr1aqdw/ - 讓我看看我是否可以添加按鈕並動態改變圖像 – Tasos 2014-10-01 01:36:26

是的我知道沒有任何演示有任何按鈕只是爲了解釋你我想要什麼。但與按鈕下一個和上一個和我的HTML與標籤圖像不喜歡演示，並且我已經嘗試做，但不透明度總是有0，如果你檢查瀏覽器中的元素 – user3778154 2014-10-01 01:50:54

嗯，我設法改變圖像，它的基本演示，不知道你會有多少圖像，但它的開始。 - http://jsfiddle.net/vzqod1zL/ – Tasos 2014-10-01 01:55:03

也許你可以將你想要轉換成較小片段的圖像（用類似Photoshop的東西）剪切掉。然後製作動畫來對齊並形成原始圖像。

希望它能幫助:)

來源

2014-10-01 02:26:48

馬賽克過渡效果

回答

相關問題