许愿墙是怎么回事儿

许愿墙是怎么回事儿，闲暇之余，用jquery做了做这个小东西的原型；

主要分三个方向：

1、设置随机背景；

2、设置随机位置；

3、支持拖拽；

就这么简单，下面的代码可以直接用，为了方便，没有为卡片设置背景，都是随机分配背景色，我们一点一点的来解析；

1、设置随机背景；

使用js随机数，指定一个颜色或背景图片；

用到的以下几行简单代码：

function setback(){

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

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

}

2、设置随机位置；

使用js随机数，指定一个颜色或背景图片；

也是几行简单的代码：

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

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

    });

}

3、支持拖拽；

支持拖拽，就是从鼠标点击许愿条开始，鼠标移动的距离就是许愿条移动的距离；

这里根据自己的需求定制，我的代码：



// 鼠标点击监听  每个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; // 释放对象

});

下面是所有的代码，演示地址在代码后面，（谁用谁知道）：演示地址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