简陋的拼图_纯javascript

题外话：
光看书学javascript是不会有多大进展的，必需要实践才知道本身有没有记住那些看过的东西。
常言道：“出来混，早晚是要还的！”，因此我看了那么多别人的博客，也是时候尝试着去写本身的博客了～

效果图：

个人思路： javascript

下面说一下我作这个拼图的思路吧： css

先将整个页面分为2个部分，左侧为image-box,右侧为image-piece；
随机生成小图片：每一个小图片都是li元素的背景图片。在生成图片的过程，只须要使用一张大图片。根据本身的规划，是要4*5仍是3*5或者怎样，再在css样式中给li设定好宽度以及高度（在这里，我使用的大图片大小是600宽、376高度而我是要4*5的拼图，那么li的样式width:120px;height:94px）。在javascript中生成li元素，而且随机产生left、top值，利用绝对定位将li元素定位在image-piece中。此外，用javascript给每个li元素设置background-position值。
拖拽图片：利用onmousedown、onmouseup、onmousemove实现图片的拖拽。

关于上述第二点的background-position的值，为了简单说明是什么意思，下面给出一个图解（以600px*376px的图片为例）

每一个小图片，就是经过css中设置width:120px,height:94px，以及javascript给每一个li元素设定不同的可是有规律的background-position获得的。

遇到的问题：

在写这个小玩意儿的时候，我曾经笨笨地用了构造函数与原型结合的模式来建立对象，后来得知这种作法在我这种小东西上太大动干戈。呵呵，虽然我有着重看了关于建立对象的书本内容，不过我仍是忘了。因此说，看了不必定记得住啊！因而后面我只用了构造函数建立对象。
此外，在写关于拖拽的事件的时候，我把return false;给忘记了，致使出现了无数问题。

啰嗦完了，代码也写得很乱，嘿嘿~欢迎你们吐槽~~~

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="stylesheets/puzzleTwo.css" />
	<script type="text/javascript" src="javascripts/puzzleTwo.js"></script>
	<title>Puzzle_Two</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	li {
		list-style: none;
	}
	#box {
		width: 1120px;
		margin: 0 auto;
		overflow: hidden;
	}
	#image-box {
		float: left;
		width: 610px;
		height: 390px;
		margin-top: 50px;
		border: 1px solid #ccc;
	}
	#image-box li {
		height: 95px;
		width: 120px;
		float: left;
		border: 1px dashed #ccc;
	}
	#image-piece {
		position: relative;
		float: left;
		width: 500px;
		height: 390px;
		margin: 50px 0px 0px 0px;
		border: 1px solid #ccc;
		border-left: none;
	}
	#image-piece li {
		width: 120px;
		height: 94px;
		position: absolute;
		cursor: move;
		background-image: url("../images/image.png");
		background-repeat: no-repeat;
	}
	#upload {
		width: 1120px;
		margin: 0 auto;
	}
	#upload input {
		height: 30px;
		width: 100px;
	}
	</style>
</head>
<body>
	<div id="box">
		<div id="image-box">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>			
		<div id="image-piece"></div>
	</div>
	<div id="upload">
		<input type="button" value="Start" id="start"/>
	</div>
</body>
</html>

javascript:

var $ = function(id) {
	return typeof id === "string" ? document.getElementById(id) : id;
}
var $$ = function(tagName,oParent) {
	return (oParent||document).getElementsByTagName(tagName);
}
var Demo = function(box,imgBox,originalImg,lis,imgsNum,url) {
	var oThis = this;
	this.box = box;
	this.imgBox = imgBox;
	this.originalImg = originalImg;
	this.lis = lis;
	this.imgsNum = imgsNum;
	this.url = url;
	this.init = function() {
		var x = 120;
		var y = 94;
		var newChild = document.createElement("ul");
		for(var i = 0;i < oThis.imgsNum;i ++) {
			var liChild = document.createElement("li");
			liChild.style.left = oThis.order("left") + "px";
			liChild.style.top = oThis.order("top") + "px";
			liChild.style.backgroundPositionX = -Math.floor(i%5)*x + "px";
			liChild.style.backgroundPositionY = -Math.floor(i/5)*y + "px";
			newChild.appendChild(liChild);
		}
		oThis.imgBox.appendChild(newChild);
		// compatible with FF and IE
		try{
			oThis.box.style.opacity = 0.5;
		}
		catch(e) {
			oThis.box.filters.alpha.opacity = 0.5;
		}
	};
	this.start = function() {
		var imgLis = $$("li",oThis.imgBox);
		try {
			oThis.box.style.opacity = 1;			
		}
		catch(e) {
			oThis.box.filters.alpha.opacity = 1;			
		}
		for(var i = 0;i < oThis.imgsNum;i ++) {
			oThis.dragEvent(imgLis[i],i);
		}
	}
	this.order = function(target) {
		if(target === "left") {
			return Math.floor(Math.random(10)*350);
		}
		else if(target === "top") {
			return Math.floor(Math.random(10)*250);
		}
		else {
			return;
		}
	};
	this.dragEvent = function(li,index) {
		var disX = 0,
			disY = 0,
			left = 0,
			top = 0,
			flag = false;	
		li.onmousedown = function(event) {
			var e = event || window.event;
			flag = true;
			disX = parseInt(e.clientX) - parseInt(li.style.left);
			disY = parseInt(e.clientY) - parseInt(li.style.top);
			li.style.zIndex = 1;
			document.onmousemove = function(event) {
				var e = event || window.event;
				if(flag) {
					li.style.left = parseInt(e.clientX) - disX + "px";
					li.style.top = parseInt(e.clientY) - disY + "px";
					if(oThis.matchImg(li,index))  {
						flag = false;
						li.onmousedown = null;
						li.onmousemove = null;
						li.onmouseup = null;
					}
				}
				return false;
			};
			document.onmouseup = function(event) {
				li.style.zIndex = 0;
				flag = false;
				return false;
			};
			return false;
		};
	};
	this.matchImg = function(li,index) {
		var left = parseInt(oThis.imgBox.offsetLeft - oThis.lis[index].offsetLeft);
		var top = parseInt(oThis.imgBox.offsetTop - oThis.lis[index].offsetTop);
		var liLeft = -parseInt(li.style.left);
		var liTop = -parseInt(li.style.top);
		var maxLeft = left + 5;
		var minLeft = left - 5;
		var maxTop = top + 5;
		var minTop = top - 5;
		if(liLeft < maxLeft && liLeft > minLeft && liTop < maxTop && liTop > minTop) {
			li.style.left = -left + "px";
			li.style.top = -top + "px";
			return true;
		}
		else 
			return false;
	};
	this.checkTime = function() {
		var time = new Date();
		var minute = time.getMinutes();
		var second = time.getSeconds();


	};
}
window.onload = function(){
	var imgsNum = 20;
	var imgBox = $("image-piece");
	var originalImg = $("image-box");
	var button = $("start");
	var lis = $$("li",originalImg);
	var box = $("box");
	var url = "url(../images/image.png)";
	var puzzleDemo = new Demo(box,imgBox,originalImg,lis,imgsNum,url);
	puzzleDemo.init();
	button.onclick = function() {
		puzzleDemo.start();
	}
}