jquery评论留言代码
2016-05-23 14:19
513 查看
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<style type="text/css">
*{margin:0px; padding:0px;}
body{background:#3FC;}
#qq{width:600px;/*宽*/height:170px;/*高*/background:#fff;/*背景颜色*/
margin:50px auto 30px; border-radius:5px;/*Html5 圆角*/}
#qq p{font-size:12px; color:#666; font-family:"微软雅黑";
line-height:45px; text-indent:20px;}
#qq .message{width:560px; height:70px;margin:0px auto; outline:none;
border:1px solid #ddd; /*粗细 风格 颜色*/}
#qq .But{width:560px;height:35px;margin:15px auto 0px; position:relative;/*相对，参考对象*/}
#qq .But img.bq{float:left;/*左浮动*/}
#qq .But span.submit{width:80px;height:30px; background:#ff8140; display:block; float:right;/*右浮动*/ line-height:30px;border-radius:5px; cursor:pointer;/*手指*/color:#fff;font-size:12px; text-align:center;font-family:"微软雅黑";}
/*face begin*/
#qq .But .face{width:390px; height:160px; background:#fff; padding:10px;
border:1px solid #ddd; box-shadow:2px 2px 3px #666;
position:absolute;/*绝对定位*/ top:21px; left:15px;
display:none;/*隐藏*/}
#qq .But .face ul li{width:22px;height:22px;
list-style-type:none;/*去掉圆点*/ float:left;
margin:2px; cursor:pointer;}
/*msgCon begin*/
.msgCon{width:600px;height:500px; margin:0px auto;}
.msgCon .msgBox{ background:#fff;
padding:10px; margin-top:20px;}
.msgCon .msgBox dl{height:60px; border-bottom:1px dotted #ddd;}
.msgCon .msgBox dl dt{width:50px; height:50px;float:left;}
.msgCon .msgBox dl dt img{border-radius:25px;}
.msgCon .msgBox dl dd{width:500px; height:50px; line-height:50px;float:right; font-size:16px;font-family:"微软雅黑";}
.msgCon .msgBox .msgTxt{font-size:12px; color:#666; line-height:25px;}
</style>
</head>
<body>
<div id="qq">
<p>有什么新鲜事想告诉大家?</p>
<div class="message" contentEditable='true'></div>
<div class="But">
<img src="images/bba_thumb.gif" class='bq'/>
<span class='submit'>发表</span>
<!--face begin-->
<div class="face">
<ul>
<li><img src="images/zz2_thumb.gif" title="[织]" ></li>
<li><img src="images/horse2_thumb.gif" title="神马]"></li>
<li><img src="images/fuyun_thumb.gif" title="[浮云]"></li>
<li><img src="images/geili_thumb.gif" title="[给力]"></li>
<li><img src="images/wg_thumb.gif" title="[围观]"></li>
<li><img src="images/vw_thumb.gif" title="[威武]"></li>
<li><img src="images/panda_thumb.gif" title="[熊猫]"></li>
<li><img src="images/rabbit_thumb.gif" title="兔子]"></li>
<li><img src="images/otm_thumb.gif" title="[奥特曼]"></li>
<li><img src="images/j_thumb.gif" title="[囧]"></li>
<li><img src="images/hufen_thumb.gif" title="[互粉]"></li>
<li><img src="images/bba_thumb.gif" title="[懒得理你]"></li>
<li><img src="images/zz2_thumb.gif" title="[织]" ></li>
<li><img src="images/horse2_thumb.gif" title="神马]"></li>
<li><img src="images/fuyun_thumb.gif" title="[浮云]"></li>
<li><img src="images/geili_thumb.gif" title="[给力]"></li>
<li><img src="images/wg_thumb.gif" title="[围观]"></li>
<li><img src="images/vw_thumb.gif" title="[威武]"></li>
<li><img src="images/panda_thumb.gif" title="[熊猫]"></li>
<li><img src="images/rabbit_thumb.gif" title="兔子]"></li>
<li><img src="images/otm_thumb.gif" title="[奥特曼]"></li>
<li><img src="images/j_thumb.gif" title="[囧]"></li>
<li><img src="images/hufen_thumb.gif" title="[互粉]"></li>
<li><img src="images/liwu_thumb.gif" title="[礼物]"></li>
<li><img src="images/liwu_thumb.gif" title="[礼物]"></li>
<li><img src="images/smilea_thumb.gif" title="呵呵]"></li>
<li><img src="images/tootha_thumb.gif" title="嘻嘻]"></li>
<li><img src="images/laugh.gif" title="[哈哈]"></li>
<li><img src="images/tza_thumb.gif" title="[可爱]"></li>
<li><img src="images/kl_thumb.gif" title="[可怜]"></li>
<li><img src="images/kbsa_thumb.gif" title="[挖鼻屎]"></li>
<li><img src="images/cj_thumb.gif" title="[吃惊]"></li>
<li><img src="images/shamea_thumb.gif" title="[害羞]"></li>
<li><img src="images/zy_thumb.gif" title="[挤眼]"></li>
<li><img src="images/bz_thumb.gif" title="[闭嘴]"></li>
<li><img src="images/bs2_thumb.gif" title="[鄙视]"></li>
<li><img src="images/lovea_thumb.gif" title="[爱你]"></li>
<li><img src="images/sada_thumb.gif" title="[泪]"></li>
<li><img src="images/heia_thumb.gif" title="[偷笑]"></li>
<li><img src="images/qq_thumb.gif" title="[亲亲]"></li>
<li><img src="images/sb_thumb.gif" title="[生病]"></li>
<li><img src="images/mb_thumb.gif" title="[太开心]"></li>
<li><img src="images/bba_thumb.gif" title="[懒得理你]"></li>
<li><img src="images/zz2_thumb.gif" title="[织]" ></li>
<li><img src="images/horse2_thumb.gif" title="神马]"></li>
<li><img src="images/fuyun_thumb.gif" title="[浮云]"></li>
<li><img src="images/geili_thumb.gif" title="[给力]"></li>
<li><img src="images/wg_thumb.gif" title="[围观]"></li>
<li><img src="images/vw_thumb.gif" title="[威武]"></li>
<li><img src="images/panda_thumb.gif" title="[熊猫]"></li>
<li><img src="images/rabbit_thumb.gif" title="兔子]"></li>
<li><img src="images/otm_thumb.gif" title="[奥特曼]"></li>
<li><img src="images/j_thumb.gif" title="[囧]"></li>
<li><img src="images/hufen_thumb.gif" title="[互粉]"></li>
<li><img src="images/liwu_thumb.gif" title="[礼物]"></li>
<li><img src="images/smilea_thumb.gif" title="呵呵]"></li>
<li><img src="images/tootha_thumb.gif" title="嘻嘻]"></li>
<li><img src="images/laugh.gif" title="[哈哈]"></li>
<li><img src="images/tza_thumb.gif" title="[可爱]"></li>
<li><img src="images/kl_thumb.gif" title="[可怜]"></li>
<li><img src="images/kbsa_thumb.gif" title="[挖鼻屎]"></li>
<li><
4000
;img src="images/cj_thumb.gif" title="[吃惊]"></li>
<li><img src="images/shamea_thumb.gif" title="[害羞]"></li>
<li><img src="images/zy_thumb.gif" title="[挤眼]"></li>
<li><img src="images/bz_thumb.gif" title="[闭嘴]"></li>
<li><img src="images/bs2_thumb.gif" title="[鄙视]"></li>
<li><img src="images/lovea_thumb.gif" title="[爱你]"></li>
<li><img src="images/sada_thumb.gif" title="[泪]"></li>
<li><img src="images/heia_thumb.gif" title="[偷笑]"></li>
<li><img src="images/qq_thumb.gif" title="[亲亲]"></li>
<li><img src="images/sb_thumb.gif" title="[生病]"></li>
<li><img src="images/mb_thumb.gif" title="[太开心]"></li>
<li><img src="images/smilea_thumb.gif" title="呵呵]"></li>
<li><img src="images/tootha_thumb.gif" title="嘻嘻]"></li>
<li><img src="images/laugh.gif" title="[哈哈]"></li>
<li><img src="images/tza_thumb.gif" title="[可爱]"></li>
<li><img src="images/kl_thumb.gif" title="[可怜]"></li>
<li><img src="images/kbsa_thumb.gif" title="[挖鼻屎]"></li>
<li><img src="images/cj_thumb.gif" title="[吃惊]"></li>
<li><img src="images/shamea_thumb.gif" title="[害羞]"></li>
<li><img src="images/zy_thumb.gif" title="[挤眼]"></li>
<li><img src="images/bz_thumb.gif" title="[闭嘴]"></li>
<li><img src="images/bs2_thumb.gif" title="[鄙视]"></li>
<li><img src="images/lovea_thumb.gif" title="[爱你]"></li>
<li><img src="images/sada_thumb.gif" title="[泪]"></li>
<li><img src="images/heia_thumb.gif" title="[偷笑]"></li>
<li><img src="images/qq_thumb.gif" title="[亲亲]"></li>
<li><img src="images/sb_thumb.gif" title="[生病]"></li>
<li><img src="images/mb_thumb.gif" title="[太开心]"></li>
<li><img src="images/bba_thumb.gif" title="[懒得理你]"></li>
</ul>
</div>
<!--face end-->
</div>
</div>
<!--qq end-->
<div id="time1"></div>
<!--msgCon begin-->
<div class="msgCon">
</div>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
//点击小图片，显示表情
$(".bq").click(function(e){
$(".face").slideDown();//慢慢向下展开
e.stopPropagation(); //阻止冒泡事件
});
//在桌面任意地方点击，他是关闭
$(document).click(function(){
$(".face").slideUp();//慢慢向上收
});
//点击小图标时，添加功能
$(".face ul li").click(function(){
var simg=$(this).find("img").clone();
$(".message").append(simg);
});
//点击发表按扭，发表内容
$("span.submit").click(function(){
var txt=$(".message").html();
if(txt==""){
$('.message').focus();//自动获取焦点
return;
}
$(".msgCon").prepend("<div class='msgBox'><dl><dt><img src='images/tx.jpg' width='50' height='50'/></dt><dd>神马都是浮云</dd></dl><div class='msgTxt'>"+txt+"</div></div>");
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<style type="text/css">
*{margin:0px; padding:0px;}
body{background:#3FC;}
#qq{width:600px;/*宽*/height:170px;/*高*/background:#fff;/*背景颜色*/
margin:50px auto 30px; border-radius:5px;/*Html5 圆角*/}
#qq p{font-size:12px; color:#666; font-family:"微软雅黑";
line-height:45px; text-indent:20px;}
#qq .message{width:560px; height:70px;margin:0px auto; outline:none;
border:1px solid #ddd; /*粗细 风格 颜色*/}
#qq .But{width:560px;height:35px;margin:15px auto 0px; position:relative;/*相对，参考对象*/}
#qq .But img.bq{float:left;/*左浮动*/}
#qq .But span.submit{width:80px;height:30px; background:#ff8140; display:block; float:right;/*右浮动*/ line-height:30px;border-radius:5px; cursor:pointer;/*手指*/color:#fff;font-size:12px; text-align:center;font-family:"微软雅黑";}
/*face begin*/
#qq .But .face{width:390px; height:160px; background:#fff; padding:10px;
border:1px solid #ddd; box-shadow:2px 2px 3px #666;
position:absolute;/*绝对定位*/ top:21px; left:15px;
display:none;/*隐藏*/}
#qq .But .face ul li{width:22px;height:22px;
list-style-type:none;/*去掉圆点*/ float:left;
margin:2px; cursor:pointer;}
/*msgCon begin*/
.msgCon{width:600px;height:500px; margin:0px auto;}
.msgCon .msgBox{ background:#fff;
padding:10px; margin-top:20px;}
.msgCon .msgBox dl{height:60px; border-bottom:1px dotted #ddd;}
.msgCon .msgBox dl dt{width:50px; height:50px;float:left;}
.msgCon .msgBox dl dt img{border-radius:25px;}
.msgCon .msgBox dl dd{width:500px; height:50px; line-height:50px;float:right; font-size:16px;font-family:"微软雅黑";}
.msgCon .msgBox .msgTxt{font-size:12px; color:#666; line-height:25px;}
</style>
</head>
<body>
<div id="qq">
<p>有什么新鲜事想告诉大家?</p>
<div class="message" contentEditable='true'></div>
<div class="But">
<img src="images/bba_thumb.gif" class='bq'/>
<span class='submit'>发表</span>
<!--face begin-->
<div class="face">
<ul>
<li><img src="images/zz2_thumb.gif" title="[织]" ></li>
<li><img src="images/horse2_thumb.gif" title="神马]"></li>
<li><img src="images/fuyun_thumb.gif" title="[浮云]"></li>
<li><img src="images/geili_thumb.gif" title="[给力]"></li>
<li><img src="images/wg_thumb.gif" title="[围观]"></li>
<li><img src="images/vw_thumb.gif" title="[威武]"></li>
<li><img src="images/panda_thumb.gif" title="[熊猫]"></li>
<li><img src="images/rabbit_thumb.gif" title="兔子]"></li>
<li><img src="images/otm_thumb.gif" title="[奥特曼]"></li>
<li><img src="images/j_thumb.gif" title="[囧]"></li>
<li><img src="images/hufen_thumb.gif" title="[互粉]"></li>
<li><img src="images/bba_thumb.gif" title="[懒得理你]"></li>
<li><img src="images/zz2_thumb.gif" title="[织]" ></li>
<li><img src="images/horse2_thumb.gif" title="神马]"></li>
<li><img src="images/fuyun_thumb.gif" title="[浮云]"></li>
<li><img src="images/geili_thumb.gif" title="[给力]"></li>
<li><img src="images/wg_thumb.gif" title="[围观]"></li>
<li><img src="images/vw_thumb.gif" title="[威武]"></li>
<li><img src="images/panda_thumb.gif" title="[熊猫]"></li>
<li><img src="images/rabbit_thumb.gif" title="兔子]"></li>
<li><img src="images/otm_thumb.gif" title="[奥特曼]"></li>
<li><img src="images/j_thumb.gif" title="[囧]"></li>
<li><img src="images/hufen_thumb.gif" title="[互粉]"></li>
<li><img src="images/liwu_thumb.gif" title="[礼物]"></li>
<li><img src="images/liwu_thumb.gif" title="[礼物]"></li>
<li><img src="images/smilea_thumb.gif" title="呵呵]"></li>
<li><img src="images/tootha_thumb.gif" title="嘻嘻]"></li>
<li><img src="images/laugh.gif" title="[哈哈]"></li>
<li><img src="images/tza_thumb.gif" title="[可爱]"></li>
<li><img src="images/kl_thumb.gif" title="[可怜]"></li>
<li><img src="images/kbsa_thumb.gif" title="[挖鼻屎]"></li>
<li><img src="images/cj_thumb.gif" title="[吃惊]"></li>
<li><img src="images/shamea_thumb.gif" title="[害羞]"></li>
<li><img src="images/zy_thumb.gif" title="[挤眼]"></li>
<li><img src="images/bz_thumb.gif" title="[闭嘴]"></li>
<li><img src="images/bs2_thumb.gif" title="[鄙视]"></li>
<li><img src="images/lovea_thumb.gif" title="[爱你]"></li>
<li><img src="images/sada_thumb.gif" title="[泪]"></li>
<li><img src="images/heia_thumb.gif" title="[偷笑]"></li>
<li><img src="images/qq_thumb.gif" title="[亲亲]"></li>
<li><img src="images/sb_thumb.gif" title="[生病]"></li>
<li><img src="images/mb_thumb.gif" title="[太开心]"></li>
<li><img src="images/bba_thumb.gif" title="[懒得理你]"></li>
<li><img src="images/zz2_thumb.gif" title="[织]" ></li>
<li><img src="images/horse2_thumb.gif" title="神马]"></li>
<li><img src="images/fuyun_thumb.gif" title="[浮云]"></li>
<li><img src="images/geili_thumb.gif" title="[给力]"></li>
<li><img src="images/wg_thumb.gif" title="[围观]"></li>
<li><img src="images/vw_thumb.gif" title="[威武]"></li>
<li><img src="images/panda_thumb.gif" title="[熊猫]"></li>
<li><img src="images/rabbit_thumb.gif" title="兔子]"></li>
<li><img src="images/otm_thumb.gif" title="[奥特曼]"></li>
<li><img src="images/j_thumb.gif" title="[囧]"></li>
<li><img src="images/hufen_thumb.gif" title="[互粉]"></li>
<li><img src="images/liwu_thumb.gif" title="[礼物]"></li>
<li><img src="images/smilea_thumb.gif" title="呵呵]"></li>
<li><img src="images/tootha_thumb.gif" title="嘻嘻]"></li>
<li><img src="images/laugh.gif" title="[哈哈]"></li>
<li><img src="images/tza_thumb.gif" title="[可爱]"></li>
<li><img src="images/kl_thumb.gif" title="[可怜]"></li>
<li><img src="images/kbsa_thumb.gif" title="[挖鼻屎]"></li>
<li><
4000
;img src="images/cj_thumb.gif" title="[吃惊]"></li>
<li><img src="images/shamea_thumb.gif" title="[害羞]"></li>
<li><img src="images/zy_thumb.gif" title="[挤眼]"></li>
<li><img src="images/bz_thumb.gif" title="[闭嘴]"></li>
<li><img src="images/bs2_thumb.gif" title="[鄙视]"></li>
<li><img src="images/lovea_thumb.gif" title="[爱你]"></li>
<li><img src="images/sada_thumb.gif" title="[泪]"></li>
<li><img src="images/heia_thumb.gif" title="[偷笑]"></li>
<li><img src="images/qq_thumb.gif" title="[亲亲]"></li>
<li><img src="images/sb_thumb.gif" title="[生病]"></li>
<li><img src="images/mb_thumb.gif" title="[太开心]"></li>
<li><img src="images/smilea_thumb.gif" title="呵呵]"></li>
<li><img src="images/tootha_thumb.gif" title="嘻嘻]"></li>
<li><img src="images/laugh.gif" title="[哈哈]"></li>
<li><img src="images/tza_thumb.gif" title="[可爱]"></li>
<li><img src="images/kl_thumb.gif" title="[可怜]"></li>
<li><img src="images/kbsa_thumb.gif" title="[挖鼻屎]"></li>
<li><img src="images/cj_thumb.gif" title="[吃惊]"></li>
<li><img src="images/shamea_thumb.gif" title="[害羞]"></li>
<li><img src="images/zy_thumb.gif" title="[挤眼]"></li>
<li><img src="images/bz_thumb.gif" title="[闭嘴]"></li>
<li><img src="images/bs2_thumb.gif" title="[鄙视]"></li>
<li><img src="images/lovea_thumb.gif" title="[爱你]"></li>
<li><img src="images/sada_thumb.gif" title="[泪]"></li>
<li><img src="images/heia_thumb.gif" title="[偷笑]"></li>
<li><img src="images/qq_thumb.gif" title="[亲亲]"></li>
<li><img src="images/sb_thumb.gif" title="[生病]"></li>
<li><img src="images/mb_thumb.gif" title="[太开心]"></li>
<li><img src="images/bba_thumb.gif" title="[懒得理你]"></li>
</ul>
</div>
<!--face end-->
</div>
</div>
<!--qq end-->
<div id="time1"></div>
<!--msgCon begin-->
<div class="msgCon">
</div>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
//点击小图片，显示表情
$(".bq").click(function(e){
$(".face").slideDown();//慢慢向下展开
e.stopPropagation(); //阻止冒泡事件
});
//在桌面任意地方点击，他是关闭
$(document).click(function(){
$(".face").slideUp();//慢慢向上收
});
//点击小图标时，添加功能
$(".face ul li").click(function(){
var simg=$(this).find("img").clone();
$(".message").append(simg);
});
//点击发表按扭，发表内容
$("span.submit").click(function(){
var txt=$(".message").html();
if(txt==""){
$('.message').focus();//自动获取焦点
return;
}
$(".msgCon").prepend("<div class='msgBox'><dl><dt><img src='images/tx.jpg' width='50' height='50'/></dt><dd>神马都是浮云</dd></dl><div class='msgTxt'>"+txt+"</div></div>");
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用Google工具栏追踪 Blog 留言
- jQuery基于ajax实现星星评论代码
- 在博客中屏蔽垃圾留言的简单方法
- 留言板翻页的实现详解
- 基于jquery实现ajax无刷新评论
- Ajax实现评论中顶和踩功能的实例代码
- ASP中限制某些字符留言评论
- 基于文本的留言簿
- destoon实现公司新闻详细页添加评论功能的方法
- 给ECShop添加最新评论
- 创建一个实现Disqus评论模版的MySQL模型
- WordPress中限制非管理员用户在文章后只能评论一次
- 详解WordPress中调用评论模板和循环输出评论的PHP函数
- WordPress中利用AJAX技术进行评论提交的实现示例
- HTML5实现留言和回复页面样式
- 个人网站留言页面（前端jQuery编写、后台php读写MySQL）
- 在PHP站点的页面上添加Facebook评论插件的实例教程
- WordPress中对访客评论功能的一些优化方法
- Yii实现单用户博客系统文章详情页插入评论表单的方法
- 给WordPress中的留言加上楼层号的PHP代码实例