头像

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

来源:https://www.daimasucai.com/form/176.html 代码素材管理员 2017-04-29浏览()

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

程序员,你不是一个人;网站开发QQ群:  在线充值,或联系QQ 3078847178直接充值

PHP+jQuery+Ajax漂亮的许愿墙源码演示
分类:首页>>网页特效>>表单按钮 阅读次数:
查看演示 下载次数: 137

手机扫码访问:

下载资源 下载积分: 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
声明:本文为原创文章,如需转载,请注明来源daimasucai.com并保留原文链接:https://www.daimasucai.com/form/176.html
如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
alipay转账 alipay转账 扫扫加qq群

评论(0)


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

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