头像

PHP+jQuery+Ajax漂亮的许愿墙源码演示

2017-09-16 09:13:42 收藏    来源:PHP代码   浏览()   评论 ( 0 )   

PHP+jQuery+Ajax漂亮的许愿墙源码演示
PHP+jQuery+Ajax漂亮的许愿墙源码演示
查看演示 下载资源:0

手机扫码访问:

下载资源 下载积分:100

  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. = "<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>";

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

  最后附上数据库信息:

CREATE TABLE IF NOT EXISTS `wishing_wall` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `content` varchar(200) NOT NULL,
  `color` int(3) DEFAULT '1',
  `xyz` varchar(100) DEFAULT NULL,
  `name` varchar(30) DEFAULT NULL,
  `addtime` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;


标签: 许愿墙Ajax
声明:转载请注明来源(PHP代码)并保留原文链接:http://www.phpdaima.com/ajax-159.html
广告不存在
评论0

后面还有条评论,点击查看>>

温馨提示:为规范评论内容,垃圾评论一律封号...

PHP+jQuery+Ajax漂亮的许愿墙源码演示
我的积分余额: 0.0 已下载次数: 0
所需积分:100100 开始下载
×