gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 08:53:51 25 4
gpt4 key购买 nike

请引用此http://54.66.151.166/

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

=> 请引用给定的各种尺寸并继续下一步。

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

如果我仅使用 jquery 或 canvas 开发相同类型的功能,有人知道如何实现吗?

最佳答案

我们要做一个图像分割效果

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
});

});

关于javascript - 如何使用Jquery创建分割图像效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32585996/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com