如何創建分割圖像效果與jQuery

Question

請參閱本http://54.66.151.166/

=>轉到Canvas->分割圖像 - >選擇大小和形狀。

=>請參考各種尺寸並繼續下一步。

=>上傳任意圖像並檢查各種尺寸的畫布效果。

如果我只用jquery或canvas開發同樣的功能，有沒有想法我該如何實現呢？

Answer 1

我們將會使圖像分割效果

HTML

 <!--START THE IMAGE PARTS HOLDER--> 
     <div class='images_holder'> 

      <!--INSERT THE SAME IMAGE IN 2 DIVS, THEY BOTH HAVE image_div CLASS AND left OR right CLASS DEPENDING ON POSITION--> 
      <div class='image_div left'><img class='box_image' src='img.jpg' style='width:300px'/></div> 
      <div class='image_div right'><img class='box_image' src='img.jpg' style='width:300px'/></div> 

      <!-- WE USED CSS FLOAT PROPERY, SO WE NEED TO CLEAR NOW--> 
      <div class='clear'></div> 

     </div> 
     <!--END THE IMAGE PARTS HOLDER--> 

     <!--START THE TEXT--> 
     Just some dummy text. 
     <!--END THE TEXT--> 

</div> 
<!--END THE MAIN CONTAINER--> 

CSS

.box_container{ 
position:relative; /* important */ 
width:300px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */ 
height:220px; /* important */ 
overflow:hidden; /* hide the content that goes out of the div */ 
/*just styling bellow*/ 
background: black; 
color:white; 
} 
.images_holder{ 
position:absolute; /* this is important, so the div is positioned on top of the text */ 
} 
.image_div { 
    position:relative; /* important so we can work with the left or right indent */ 
    overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */ 
    width:50%; /* make it 50% of the whole images_holder */ 
    float:left; /* make then inline */ 
} 
.rightright img{ 
    margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */ 
} 
.clear{ 
    clear:both; 
} 

JQUERY

$(document).ready(function() { 

     //when the user hovers over the div that contains our html... 
     $('.box_container').hover(function(){ 
      //... we get the width of the div and split it by 2 ... 
      var width = $(this).outerWidth()/2; 
      /*... and using that width we move the left "part" of the image to left and right "part" 
      to right by changing it's indent from left side or right side... '*/ 
      $(this).find('.left').animate({ right : width },{queue:false,duration:300}); 
      $(this).find('.right').animate({ left : width },{queue:false,duration:300}); 
     }, function(){ 
      //... and when he hovers out we get the images back to their's starting position using the same function... ' 
      $(this).find('.left').animate({ right : 0 },{queue:false,duration:300}); 
      $(this).find('.right').animate({ left : 0 },{queue:false,duration:300}); 
      //... close it and that's it 
     }); 

});