Question

我试图为我的转盘制作马赛克效果

就像这个例子：

http://burnmind.com/demos/mosaic/不喜欢这个100％我希望下一个和之前有控件按钮并且在html标签中有图像

但它不起作用我想要帮助

这是我的工作Jsfiddle

我只为前一个按钮设置了下一个按钮，这将是同样的事情，我将用位置替换位置++ -

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;

}

Answer 1

也许你可以剪切想要转换成较小片段的图像（像Photoshop一样）。然后只需动画它们以对齐并形成原始图像。

希望有所帮助：）

多个图像之间的马赛克过渡效果

1 个答案: