头像

PHP+jQuery+Ajax漂亮的许愿墙效果

来源:http://www.erdangjiade.com/ 二当家的 2016-12-23 13:49浏览(2201)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,9.9元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

PHP+jQuery+Ajax漂亮的许愿墙效果
分类:悬浮层/弹出层 > 拖动 难易:中级
查看演示 下载资源: 207

关注微信号获取此Demo视频教程:

下载资源 下载积分: 160 积分

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

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

<div class="container"style="position: relative">
  <?php echo $notes; ?>
</div>

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

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

<div class="add">
      <a href="add_note.html" id="fancy" class="add_note"></a>
</div>

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

<div id='send-form'>
    <p class='title'><span>许下你的愿望</span><a  id='box_close'></a></p>
    <form action="" name='wish'>
        <div class="per">
            <label for="username">昵称:</label>
            <input type="text" name='username' id='username'/>
        </div>
        <div class="per">
            <label for="content">愿望:(您还可以输入 <span id='font-num'>50</span> 个字)</label>
            <textarea name="content" id='content'>

添加许愿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 = "<dl class='paper a" + color_id + " ui-draggable' data-id='" + msg + "' style='left:" + left + "px;top:" + top + "px;z-index:" + zIndex + "'>\n\
<dt><span class='username'>" + username + "</span><span class='num'>6</span></dt>\n\
<dd class='content'>" + txt + "</dd><dd class='bottom'><span class='time'>刚刚</span>\n\
<a class='close' href='javascript:void(0);'></a></dd></dl>";
                $(".container").append(str);
                make_draggable($('dl'));
                $.fancybox.close();
            } else {
                alert(msg);
            }
        });
        e.preventDefault();
    });

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

声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:http://www.erdangjiade.com/js/136.html
评论22
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

  • 头像 21楼
    11-14 17:28
    leecobber
    很漂亮,学习了
  • 头像 20楼
    11-07 22:44
    wujixian
    很好,学习,这是HTML模板吧
  • 头像 19楼
    11-07 22:34
    wujixian
    很好,值得学习,这是HTML模板
  • 头像 18楼
    11-04 09:48
    puton_wp
    后面怎么是乱码?
  • 头像 17楼
    10-12 22:20
    wwdzcdb
    辛苦楼主了 感谢分享这么好的资源
  • 头像 16楼
    09-18 08:34
    qqlixiangabc
    好东西你值得学习。。。。
  • 头像 15楼
    09-14 11:54
    TTCC
    666 z真是太好了
  • 头像 14楼
    09-11 11:27
    fh353974774
    看着不错,可惜不太懂,外行!!!
  • 头像 13楼
    08-27 09:31
    帕卡比鲁斯
    赞一个,正在学习 PHP, 谢谢楼主
  • 头像 12楼
    08-22 11:32
    zyq123
    许愿墙很漂亮,可惜积分不够
1 2