许愿墙—许下你的愿望
- WBOYasal
- 2016-06-07 11:38:272963semak imbas
从网上找了一个很漂亮的许愿墙模板，早上就花了一段时间写了这个许愿墙程序，给大家分享下。
首先我们遍历出所有的许愿列表：$query = mysql_query("select * from wishing_wall order by id desc limit 0, 50"); <br>
while ($row = mysql_fetch_array($query)) { <br>
list($left, $top, $zindex) = explode('|', $row['xyz']); <br>
$time = strtotime($row['addtime']); <br>
<br>
$notes .= "<dl> <br>
<dt>
<span>" . $row['name'] . "</span><span>" . $row['id'] . "</span>
</dt> <br>
<dd>" . $row['content'] . "</dd> <br>
<dd>
<span>" . tranTime($time) . "</span><a></a>
</dd> <br>
</dl>";接着我们把许愿列表放到.container里面：<div> <br>
<?php echo $notes; ?> <br>
</div>通过jQueryUI拖动许愿墙悬浮层代码如下：var zIndex = 0; <br>
function make_draggable(elements) { <br>
elements.draggable({ <br>
handle: 'dt', //拖动把手 <br>
opacity: 0.8, <br>
containment: 'parent', //拖动范围 <br>
start: function(e, ui) { <br>
ui.helper.css('z-index', ++zIndex) <br>
}, <br>
stop: function(e, ui) { <br>
$.get('ajax.php?act=update_position', { <br>
x: ui.position.left, <br>
y: ui.position.top, <br>
z: zIndex, <br>
id: parseInt(ui.helper.attr("data-id")) <br>
}); <br>
} <br>
}); <br>
}PHP保存位置：$act = htmlspecialchars($_GET['act']); <br>
if ($act == 'update_position') { <br>
if (!is_numeric($_GET['id']) || !is_numeric($_GET['x']) || !is_numeric($_GET['y']) || !is_numeric($_GET['z'])) <br>
die("0"); <br>
<br>
$id = intval($_GET['id']); <br>
$x = intval($_GET['x']); <br>
$y = intval($_GET['y']); <br>
$z = intval($_GET['z']); <br>
<br>
mysql_query("UPDATE wishing_wall SET xyz='" . $x . "|" . $y . "|" . $z . "' WHERE id=" . $id); <br>
<br>
echo "1"; <br>
}许愿墙演示：http://www.sucaihuo.com/php/136.html
许愿墙表单表情尚未做，请关注许愿墙代码后面的更新。
PHP+jQuery+Ajax漂亮的许愿墙效果.zip
( 239.97 KB 下载：137 次 )
AD：真正免费，域名+虚机+企业邮箱=0元