Разрезать картинку
Moloch,
:write: после разрезки растащить в ручную
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.segment {
position: relative;
background: url('http://javascript.ru/forum/images/ca_serenity/misc/logo.gif') no-repeat;
margin: 0;
float: left;
}
.container {
background: url('http://javascript.ru/forum/images/ca_serenity/misc/logo.gif') no-repeat;
width: 500px;
height: 300px;
position: relative;
background-size: 500px 300px;
padding: 0;
margin: 0 auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
var defaultCoords = [],
el = $(".container");
function dissectMyFigure(h, l) {
el.css({
"background-image": "none"
});
var width = el.width() / l - 2,
height = el.height() / h - 2;
backgroundSize = el.width()+ 'px ' + el.height() + 'px'
$.each(Array(h * l), function(indx, element) {
var div = $("<div/>", {
"class": "segment",
"css": {
"width": width,
"height": height,
"border": "1px solid black",
"backgroundSize" : backgroundSize
}
}).appendTo(el)
});
$(".segment").each(function(indx, s) {
var e = $(s).position();
var pos_x = e.left;
var pos_y = e.top;
defaultCoords[indx] = {
"pos_x": pos_x,
"pos_y": pos_y
};
$(s).css({
left: pos_x,
top: pos_y,
"background-position-x": "-" +
pos_x + "px",
"background-position-y": "-" + pos_y + "px"
})
}).css({
"position": "absolute"
}).draggable()
}
$("#dissect").on("click", function() {
dissectMyFigure(5, 3)
});
$("#join").on("click", function() {
$(".segment").each(function(indx, s) {
var e = $(s);
e.animate({
left: defaultCoords[indx]["pos_x"],
top: defaultCoords[indx]["pos_y"]
}, 2000, function() {
e.remove();
$(".container").css("background-image", 'url("http://javascript.ru/forum/images/ca_serenity/misc/logo.gif")')
})
})
})
});
</script>
</head>
<body>
<div class="container">
</div>
<p><button id="dissect">Разрезать картинку</button></p>
<p><button id="join">Собрать картинку</button></p>
</body>
</html>
|