jQuery 拼图实例

最新推荐文章于 2023-11-17 15:02:02 发布

何时_枫叶红

最新推荐文章于 2023-11-17 15:02:02 发布

阅读量410

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yuchen352416/article/details/44002369

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

HTML 文档

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>jQuery</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
		<link rel="stylesheet" type="text/css" href="css/user.css"/>
		
		<script src="js/jquery-2.1.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/user.js" ></script>
	</head>
	<body>
		
		<div class="container background-main">
			<div class="image-item img1" id="img1"></div>
			<div class="image-item img2" id="img2"></div>
			<div class="image-item img3" id="img3"></div>
			<div class="image-item img4" id="img4"></div>
			<div class="image-item img5" id="img5"></div>
			<div class="image-item img6" id="img6"></div>
			<div class="image-item img7" id="img7"></div>
			<div class="image-item img8" id="img8"></div>
			<div class="image-item img9" id="img9"></div>
		</div>
		<audio src="music/slide.mp3" id="music"></audio>
		
	</body>
</html>

CSS文件

.background-main{
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.image-item{
	width: 245px;
	height: 200px;
	position: absolute;
	/*background: no-repeat center top fixed;*/
	/*background-size:100% 100%;*/
	/*background-color: red;*/
	float: left;
}

.img1{
	left: 0px;
	top: 0px;
}
.img2{
	left: 245px;
	top: 0px;
}
.img3{
	left: 490px;
	top: 0px;
}
.img4{
	left: 0px;
	top: 200px;
}
.img5{
	left: 245px;
	top: 200px;
}
.img6{
	left: 490px;
	top: 200px;
}
.img7{
	left: 0px;
	top: 400px;
}
.img8{
	left: 245px;
	top: 400px;
}
.img9{
	left: 490px;
	top: 400px;
}


#img1{
	background: url(../img/img0.png);
	background-size:100% 100%;
}
#img2{
	background: url(../img/img1.png);
	background-size:100% 100%;
}
#img3{
	background: url(../img/img2.png);
	background-size:100% 100%;}
#img4{
	background: url(../img/img3.png);
	background-size:100% 100%;}
#img5{
	background: url(../img/img4.png);
	background-size:100% 100%;}
#img6{
	background: url(../img/img5.png);
	background-size:100% 100%;}
#img7{
	background: url(../img/img6.png);
	background-size:100% 100%;}
#img8{
	background: url(../img/img7.png);
	background-size:100% 100%;
}
#img9{
	background: url(../img/img8.png);
	background-size:100% 100%;
}

jQuery 文件

var sum = 0; // 存放所有方块对应值的和
var arr = []; // 存放8块图片的容器

window.onload = function() {
	
	// 随机产生不相同的8个随机数
	var index = [];
	for(var i = 0; i < 8; i++){
		index[i] = parseInt(Math.random()*8);
		for(var j = 0; j < i; j++){
			if(index[i] == index[j]){break;}
		}
		if(j != i){i--;}
	}
	
	
	// 获得所有方块对应值的和
	$.each($('.image-item'), function() {
		sum += parseInt($(this).css("left")) + parseInt($(this).css("top"));
	});
	
	// 把浮动的8个方块的名字,存入容器
	for(var i = 1; i < 9; i++){
		var str = "img" + i;
		arr[i-1] = document.getElementById(str);
	}
	
	// 打乱8块方块位置
	for(var i = 0; i < 8; i++) {
		var mod = i - parseInt(i / 3) *3;
		var setLeft = mod * 245;
		var setTop = parseInt(i / 3) * 200;
		arr[index[i]].style.left = setLeft + "px";
		arr[index[i]].style.top = setTop + "px";
	}

	// 隐藏第九块图片
	$("#img9").hide(); // $("#img9").show();
	
	// 绑定每块图片的单击事件
	$('.image-item').click(function(){
		
		// 存放单击图片对应的数值
		var num = parseInt($(this).css("left")) + parseInt($(this).css("top"));
		
		// 存放当前8块方块对应值的和
		var presentSum = 0;
		
		// 计算当前8块方块对应值的和
		for(var i = 0; i < arr.length; i++) {
			presentSum += parseInt($(arr[i]).css("left")) + parseInt($(arr[i]).css("top"));
		}
	
		// 存放当前空格对应的要数值
		var notExist = 0;
		// 计算9块方格中,哪一块是空的
		notExist = sum - presentSum;
		
		// 标识 
		var flag = notExist - num;
		
		// 触发声音
		document.getElementById("music").play();
		
		// 判断方块的移动方向
		if(flag == 200 || flag == -200) {
			var setTop = parseInt($(this).css("top")) + flag;
			// 上下移动方块(带动画)
			$(this).animate({top: setTop + "px"});
		} else if(flag == 245 || flag == -245) {
			var setLeft = parseInt($(this).css("left")) + flag;
			// 左右移动方块(带动画)
			$(this).animate({left: setLeft + "px"});
		}
		
		
		
		// 判断是否拼好
		var judge = []; // 存放当前所有方块对应的值
		for(var i = 0; i < 8; i++) {
			judge[i] = parseInt(arr[i].style.left) + parseInt(arr[i].style.top);
			if(judge[i] == num) {
				judge[i] += flag;
			}
		}
		
		for(var j = 0; j < 8; j++) {
			var mod = j - parseInt(j / 3) *3;
			var setLeft = mod * 245;
			var setTop = parseInt(j / 3) * 200;
			var temp = setLeft + setTop;
			if(temp != judge[j]) {
				break;
			}
		}
		
		if(j == 8) {
			// 显示第九块图片
			$("#img9").slideDown();
			// 取消单击绑定
			$('.image-item').unbind("click")
		} 
		
	});
	
	
}