从网上找了一个很漂亮的许愿墙模板,早上就花了一段时间写了这个许愿墙程序,给大家分享下。
首先我们遍历出所有的许愿列表:$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元

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

WebStorm Mac版
便利なJavaScript開発ツール

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
