jquery 许愿墙

最近研究了下许愿墙的功能，还不错，贴出来分享下。
许愿墙的几个功能点：
1、设置随机背景；
2、设置随机位置；
3、支持拖拽；

就这么简单，下面的代码可以直接用，为了方便，没有为卡片设置背景，都是随机分配背景色，以下的代码段，完全胜任，刚刚说的三点；

演示地址在代码后面，（谁用谁知道）：演示地址http://www.chenglin.name/clin-show/wishes.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">

<head>

<script type="text/javascript" src="http://www.chenglin.name/clin-public/jquery-1.9.1.min.js"></script>

<style type="text/css">

#wishmain div{cursor:pointer;position:absolute;width:220px;height:150px;border:1px solid #999;}

.wish{left:100px;top:100px;background:#fc9;}

</style>





</head>

<body>

  <div id="wishmain">

    <div class="wish" >1</div>

    <div class="wish" >2</div>

    <div class="wish" >3</div>

    <div class="wish" >4</div>

    <div class="wish" >5</div>

    <div class="wish" >5</div>

  </div>





<script type="text/javascript">

var obj;//对象

var obj1;//对象

var mx; //鼠标位置

var my;

var ox; //对象位置

var oy; 

var sx = $(document).width(); //系统宽度

var sy = $(document).height();



// 鼠标点击监听  每个wishmian下面的div

$("#wishmain div").mousedown(function(e){

	obj=$(this);

	mx = e.pageX;my = e.pageY;  // 鼠标第一次点击获取坐标

	ox = parseInt(obj.css("left")); // 对象的坐标

	oy = parseInt(obj.css("top"));

});



// 鼠标移动监听

$(document).mousemove(function(e){

	if(!obj)return; // 表示选中了对象

	var cx=e.pageX-mx+ox;

	var cy=e.pageY-my+oy;

	obj.css("z-index",getz());// 显示在最前面

	obj.css({"top":cy+"px","left":cx+"px"});

})



// 鼠标抬起监听

$(document).mouseup(function(){

	obj=null; // 释放对象

});



// 获取当前最前面的值

function getz(){

	var max = 0;

	var tmp = 0;

	$("#wishmain div").each(function(){

		tmp = parseInt($(this).css("z-index"));

		if( max < tmp){max=tmp;}

	});

	return max+1;

}

/*****************下面自己设置*******************/



// 设置许愿条背景随机

function setback(){

	var arr = new Array('#7E7DD4','#A0D581','#E2BBA7','#E3ABC4','#CAB3E6');

	return arr[parseInt(Math.random()*5)];

}

// 设置许愿条开始随机位置

function setpos(){

	$("#wishmain div").each(function(){

		var rx = parseInt(Math.random()*(sx-$(this).width()));

		var ry = parseInt(Math.random()*(sy-$(this).height()));

		$(this).css("background",setback());

		$(this).css({"top":ry+"px","left":rx+"px"});

	});

}

setpos();





</script>



</body>

</html>

不懂得可以和我交流，查看演示地址http://www.chenglin.name/clin-show/wishes.html