从网上找了一个很漂亮的许愿墙模板,早上就花了一段时间写了这个许愿墙程序,给大家分享下。

首先我们遍历出所有的许愿列表:$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 .= "<dl class='paper a" . $row['color'] . "' style='left:" . $left . "px;top:" . $top . "px;z-index:" . $zindex . "' data-id=" . $row['id'] . ">
<dt><span class='username'>" . $row['name'] . "</span><span class='num'>" . $row['id'] . "</span></dt>
<dd class='content'>" . $row['content'] . "</dd>
<dd class='bottom'><span class='time'>" . tranTime($time) . "</span><a class='close' href='javascript:void(0);'></a></dd>
</dl>";接着我们把许愿列表放到.container里面:<div class="container"style="position: relative">
<?php echo $notes; ?>
</div>通过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";
}许愿墙演示:http://www.sucaihuo.com/php/136.html
许愿墙表单表情尚未做,请关注许愿墙代码后面的更新。

附件 PHP+jQuery+Ajax漂亮的许愿墙效果.zip ( 239.97 KB 下载:415 次 )

评论() 相关

收藏

赞

hjl416148489

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。