web前端学习群，189394454，有视频、源码、学习方法等大量干货分享
经常发说说的朋友对这效果很熟悉吧，对的，就是空间说说发表，每天发说说是这样发，但是怎么做到的呢？
👇html代码：
有什么新鲜事想告诉大家?
发表
👇css代码：
*{margin:0px;/*外边距*/padding:0px;/*内边距*/}
ul,li{list-style:none;}
body{background:url("images/bg_04.jpg");
background-size:cover;}
#message{width:600px;/*宽度*/
height:170px;/*高度 px像素 pt em vh*/
background:#fff;
margin:200px auto 0;/*上 左右 下*/
border-radius:5px;/*css3 圆角*/}
#message p{font-size:12px;/*字体大小*/
font-family:"微软雅黑"; /*字体类型*/
color:#666;
height:40px;
/*border:1px solid #000;/*边框 宽度 风格 颜色*/
line-height:40px;
text-indent:20px;/*首行缩进*/}
#message .edit{width:560px;
height:70px;
border:1px solid #ccc;
margin:0 auto;}
#message .but{width:560px;height:40px;/*border:1px solid #000;*/margin:15px auto 0;position:relative;/*参照物*/}
#message .but .msg_but{width:80px;height:30px;background:#7db718;display:inline-block;/*行间块级 block块级 none隐藏 inline行间*/font-size:12px;color:#fff;font-family:"微软雅黑";text-align:center;/*对齐方式*/line-height:30px;border-radius:3px;float:right;}
#message .but .imgface{cursor:pointer;/*指针形状*/}
#message .but .msg_but{cursor:pointer;/*指针形状*/}
#message .but .face{width:395px;height:160px;background:#fff;border:1px solid #ddd;position:absolute;top:20px;left:20px;padding:10px;display:none;}
#message .but .face ul li{width:22px;height:22px;float:left;margin:2px;}
.msgBox{width:600px;margin:15px auto;}
.msgBox .msgInfo{width:580px;background:#fff;padding:10px;margin-bottom:10px;}
.msgBox .msgInfo dl{width:100%;height:60px;border-bottom:1px solid #ddd;}
.msgBox .msgInfo dl dt{width:50px;height:50px;float:left;}
.msgBox .msgInfo dl dd{width:500px;height:50px;line-height:50px;font-family:"微软雅黑";
font-size:14px;float:right;}
.msgBox .msgInfo .con{font-size:12px;line-height:20px;font-family:"微软雅黑";}
👇javascript代码：
//展开表情
$(".imgface").click(function(e){
$(".face").slideDown(); //向下展开
e.stopPropagation(); //阻止冒泡
});
$(document).click(function(){
$(".face").slideUp(); //向上收缩
});
//点击表情
$(".face ul li").click(function(){
var _img=$(this).find("img").clone(); //当前 img find() 查找 找到
$(".edit").append(_img); //追加
});
$(".msg_but").click(function(){
var _txt=$(".edit").html(); //获取当前编辑区域的内容(包括标签)
if(_txt == ""){
$(".edit").focus(); //获取焦点
}
else{
$(".msgBox").append("
IT潇潇"+_txt+"");
$(".edit").html("");
}
});
如果觉得《空间发表说说html页面实现原理 空间说说还能这样玩？jquery开发腾讯QQ空间说说发表效果...》对你有帮助，请点赞、收藏，并留下你的观点哦！
