jQuery 拼图实例

来源：互联网发布：mac桌面图标删不掉编辑：程序博客网时间：2024/04/28 20:33

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

0 0