欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

许愿墙—许下你的愿望

程序员文章站 2022-05-23 09:38:10
...
从网上找了一个很漂亮的许愿墙模板,早上就花了一段时间写了这个许愿墙程序,给大家分享下。
[img]http://www.thinkphp.cn/Uploads/editor/2015-05-27/556517bc7b938.jpg[/img]
首先我们遍历出所有的许愿列表:
$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>";

通过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";  }


[b]照片墙墙演示[/b]:[url]http://www.sucaihuo.com/php/136.html[/url]