JQuery: Sample: simple Jigsaw Puzzle


<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
div {
display: block;
width: 100px;
height: 100px;
/*background-color: orange;*/
border: 1px solid orange;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
float: left;
}
#countdown{
display:block;

width: 5em;
height: 2em;
margin-right: auto; margin-left: auto;
text-align: center;

}
</style>

</head>
<body>
<div style=”width: 100%; height: 420px;”>

<div style=”width: 410px; height: 410px; background: url(us3.JPG);” >
<div style=”background:url(us3.JPG); background-position: -200px -100px ;”></div>
<div style=”background: url(us3.JPG); background-position: -100px 0 ;”></div>
<div style=”background: url(us3.JPG); background-position: 0 -300px ;”></div>
<div style=”background: url(us3.JPG); background-position: -100px -200px ;”></div>
<div style=”background: url(us3.JPG); background-position: 0 -100px ;”></div>
<div style=”background: url(us3.JPG); background-position: -100px -300px ;”></div>
<div style=”background: url(us3.JPG); background-position: -200px 0 ;”></div>
<div style=”background: url(us3.JPG); background-position: -300px -200px ;”></div>
<div style=”background: url(us3.JPG); background-position: 0 0 ;”></div>
<div style=”background: url(us3.JPG); background-position: -200px -200px ;”></div>
<div style=”background: url(us3.JPG); background-position: -300px -100px ;”></div>
<div style=”background: url(us3.JPG); background-position: -100px -100px ;”></div>
<div style=”background: url(us3.JPG); background-position: -200px -300px ;”></div>
<div style=”background: url(us3.JPG); background-position: -300px 0 ;”></div>
<div style=”background: url(us3.JPG); background-position: 0 -200px ;”></div>
<div style=”background: url(us3.JPG); background-position: -300px -300px ;”></div>
</div>

<div style=”width: 410px; height: 410px; align:center; float: right;”>
<p>
Arrange the blocks in this block
</p>
</div>
</div>

<div id=”countdown” style=”left: 50%; “> </div>

<button style=”width: 10em”>start</button>

<script src=”js/jquery-1.9.1.min.js” ></script>
<script src=”js/jquery-ui.min.js”></script>
<script>
var select = false;
var count = 120;
$().ready(function(){
$(“.block”).hide();
})
$(“button”).click(function(){
$(“.block”).show();
setInterval(function(){
count = count -1;
$(“#countdown”).text(count);
}, 1000);
});
$(“.block”).mousedown(function(e) {
var element = this;
var x= e.pageX – this.offsetLeft;
var y = e.pageY – this.offsetTop;
if (select == false){
select = true;
$(window).bind(“mousemove”, function(e1){
$(element).css({
“position” : “absolute”
});
$(window).css({
“-webkit-user-select” : “none”
});
$(element).css({
“left” : (e1.pageX – x) + “px”
});
$(element).css({
“top” : (e1.pageY – y) + “px”
});

})
}else{
$(window).unbind(‘mousemove’);
select = false;
}
});
</script>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s