php许愿墙模板,PHP+jQuery+Ajax漂亮的许愿墙效果

之前我们讲了PHP+MySQL+jQueryUI完美便签条http://www.sucaihuo.com/js/70.html，今天我们在此基础上做一个漂亮的许愿墙效果。

下载资源

下载积分：

150

积分

HTML

首先我们遍历出所有的许愿列表： $query = mysql_query("select * from wishing_wall order by id desc limit 0, 50");

while ($row = mysql_fetch_array($query)) {

list($left, $top, $zindex) = explode('|', $row['xyz']);

$time = strtotime($row['addtime']);

$notes .= "

" . $row['name'] . " " . $row['id'] . "

" . $row['content'] . "

" . tranTime($time) . "

";

接着我们把许愿列表放到.container里面：

jQuery

通过jQueryUI拖动许愿墙悬浮层代码如下： var zIndex = 0;

function make_draggable(elements) {

elements.draggable({

handle: 'dt', //拖动把手

opacity: 0.8,

containment: 'parent', //拖动范围

start: function(e, ui) {

ui.helper.css('z-index', ++zIndex)

},

stop: function(e, ui) {

$.get('ajax.php?act=update_position', {

x: ui.position.left,

y: ui.position.top,

z: zIndex,

id: parseInt(ui.helper.attr("data-id"))

});

}

});

}

PHP

保存位置： $act = htmlspecialchars($_GET['act']);

if ($act == 'update_position') {

if (!is_numeric($_GET['id']) || !is_numeric($_GET['x']) || !is_numeric($_GET['y']) || !is_numeric($_GET['z']))

die("0");

$id = intval($_GET['id']);

$x = intval($_GET['x']);

$y = intval($_GET['y']);

$z = intval($_GET['z']);

mysql_query("UPDATE wishing_wall SET xyz='" . $x . "|" . $y . "|" . $z . "' WHERE id=" . $id);

echo "1";

}

我们再看下添加许愿代码：

通过fancybox插件弹出add_note.html，add_note.html表单代码如下：

许下你的愿望

昵称：

愿望：(您还可以输入 50 个字)

添加许愿jQuery代码： $("#addbtn").live('click', function(e) {

var txt = $("#content").val();

var username = $("#username").val();

if (txt == "") {

$("#content").focus();

return false;

}

if (username == "") {

$("#msg").html("请输入您的姓名！");

$("#user").focus();

return false;

}

var left = 0;

var top = 0;

var color_id = $("#color").children("li.current").attr("data-color-id");

var data = {

'zIndex': ++zIndex,

'content': txt,

'user': username,

'left': left,

'top': top,

"color_id": color_id

};

$.post('ajax.php?act=add', data, function(msg) {

zIndex = zIndex++;

if (parseInt(msg)) {

var str = "

" + username + " 6

" + txt + "

刚刚\n\

";

$(".container").append(str);

make_draggable($('dl'));

$.fancybox.close();

} else {

alert(msg);

}

});

e.preventDefault();

});

表单里面的表情尚未做，有兴趣的可以自己做下，我们将在后面添加表情代码，敬请关注。不明白jqueryUI的API可以参考：http://www.sucaihuo.com/js/68.html。