如何使用 Jquery 创建分割图像效果

Question

请参考http://54.66.151.166/

=> 转到画布->分割图像->选择大小和形状。

=> 参考给出的各种尺寸并继续下一步。

=> 上传任何图像并检查各种尺寸的画布效果。

如果我只使用 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  
        });  

});