0
请参阅本http://54.66.151.166/如何创建分割图像效果与jQuery
=>转到Canvas->分割图像 - >选择大小和形状。
=>请参考各种尺寸并继续下一步。
=>上传任意图像并检查各种尺寸的画布效果。
如果我只用jquery或canvas开发同样的功能,有没有想法我该如何实现呢?
请参阅本http://54.66.151.166/如何创建分割图像效果与jQuery
=>转到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
});
});
嗨GS,谢谢你的回复,但这不是你在这里给出的东西。看来你已经把两个图像分成两个div,并且悬停jQuery效果将会发生。但我想要的是单个图像将被拆分成多个图块。 –
请阅读如何前... http://stackoverflow.com/help/how-to-ask问,然后创建一个真正的问题 – areim
喜areim问题,你能告诉我哪里是混乱,我认为这是明确的,也是这个单一的真正问题,以及... :) –
例如: 搜索,研究和跟踪你找到。 解释你是如何遇到你要解决的问题的,以及任何阻碍你自己解决的难题。 你的问题太全球化了,听起来像是“嘿伙计,我自己懒得自己做,有人可以为我创造这个吗?” – areim