<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="HTML带表情的评论框,HTML评论框,表情评论框" />
<title>HTML带表情的评论框</title>
<style type="text/css">
.Main {
width: 500px;
height: 500px;
margin: 0 auto;
margin-top: 100px;
}
.Input_Box {
width: 495px;
height: 160px;
border: 1px solid #ccc;
transition: border linear .2s, box-shadow linear .5s;
-moz-transition: border linear .2s, -moz-box-shadow linear .5s;
-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
position: absolute;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
}
.Input_Box>textarea {
width: 485px;
height: 111px;
padding: 5px;
outline: none;
border: 0px solid #fff;
resize: none;
font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.Input_Foot {
width: 100%;
height: 35px;
border-top: 1px solid #ccc;
background-color: #fff;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
position: absolute;
}
.imgBtn {
float: left;
margin-top: 8px;
margin-left: 10px;
background-image: url(imgs.png);
background-repeat: no-repeat;
background-position: 0 -13px;
height: 18px;
width: 20px;
cursor: pointer
}
.imgBtn:active {
margin-top: 9px;
}
.imgBtn:hover {
background-position: 0 -31px
}
.postBtn {
float: right;
font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
color: #808080;
padding: 9px 20px 7px 20px;
border-left: 1px solid #ccc;
cursor: pointer;
-moz-border-radius: 0 0 5px 0;
-webkit-border-radius: 0 0 5px 0;
border-radius: 0 0 5px 0;
}
.postBtn:hover {
color: #333;
background-color: #efefef;
}
.postBtn:active {
padding: 10px 20px 6px 20px;
}
.faceDiv {
width: 500px;
height: 120px;
border-top: 1px solid #ccc;
position: absolute;
background-color: #fff;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.faceDiv>img {
border: 1px solid #ccc;
float: left;
margin-left: -1px;
margin-top: -1px;
position: relative;
width: 24px;
height: 24px;
padding: 3px 3px 3px 3px;
cursor: pointer;
}
.faceDiv>img:hover {
background-color: #efefef;
}
.faceDiv>img:active {
padding: 4px 3px 2px 3px;
}
</style>
</head>
<body>
<div id="Demo" style="text-align:center;">
<div class="Main">
<div class="Input_Box">
<textarea class="Input_text"></textarea>
<div class="faceDiv"> </div>
<div class="Input_Foot"> <a class="imgBtn" href="javascript:void(0);"></a><a class="postBtn">确定</a> </div>
</div>
</div>
</div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
ImgIputHandler.Init();
});
var ImgIputHandler={
facePath:[
{faceName:"微笑",facePath:"0_微笑.gif"},
{faceName:"撇嘴",facePath:"1_撇嘴.gif"},
{faceName:"色",facePath:"2_色.gif"},
{faceName:"发呆",facePath:"3_发呆.gif"},
{faceName:"得意",facePath:"4_得意.gif"},
{faceName:"流泪",facePath:"5_流泪.gif"},
{faceName:"害羞",facePath:"6_害羞.gif"},
{faceName:"闭嘴",facePath:"7_闭嘴.gif"},
{faceName:"大哭",facePath:"9_大哭.gif"},
{faceName:"尴尬",facePath:"10_尴尬.gif"},
{faceName:"发怒",facePath:"11_发怒.gif"},
{faceName:"调皮",facePath:"12_调皮.gif"},
{faceName:"龇牙",facePath:"13_龇牙.gif"},
{faceName:"惊讶",facePath:"14_惊讶.gif"},
{faceName:"难过",facePath:"15_难过.gif"},
{faceName:"酷",facePath:"16_酷.gif"},
{faceName:"冷汗",facePath:"17_冷汗.gif"},
{faceName:"抓狂",facePath:"18_抓狂.gif"},
{faceName:"吐",facePath:"19_吐.gif"},
{faceName:"偷笑",facePath:"20_偷笑.gif"},
{faceName:"可爱",facePath:"21_可爱.gif"},
{faceName:"白眼",facePath:"22_白眼.gif"},
{faceName:"傲慢",facePath:"23_傲慢.gif"},
{faceName:"饥饿",facePath:"24_饥饿.gif"},
{faceName:"困",facePath:"25_困.gif"},
{faceName:"惊恐",facePath:"26_惊恐.gif"},
{faceName:"流汗",facePath:"27_流汗.gif"},
{faceName:"憨笑",facePath:"28_憨笑.gif"},
{faceName:"大兵",facePath:"29_大兵.gif"},
{faceName:"奋斗",facePath:"30_奋斗.gif"},
{faceName:"咒骂",facePath:"31_咒骂.gif"},
{faceName:"疑问",facePath:"32_疑问.gif"},
{faceName:"嘘",facePath:"33_嘘.gif"},
{faceName:"晕",facePath:"34_晕.gif"},
{faceName:"折磨",facePath:"35_折磨.gif"},
{faceName:"衰",facePath:"36_衰.gif"},
{faceName:"骷髅",facePath:"37_骷髅.gif"},
{faceName:"敲打",facePath:"38_敲打.gif"},
{faceName:"再见",facePath:"39_再见.gif"},
{faceName:"擦汗",facePath:"40_擦汗.gif"},
{faceName:"抠鼻",facePath:"41_抠鼻.gif"},
{faceName:"鼓掌",facePath:"42_鼓掌.gif"},
{faceName:"糗大了",facePath:"43_糗大了.gif"},
{faceName:"坏笑",facePath:"44_坏笑.gif"},
{faceName:"左哼哼",facePath:"45_左哼哼.gif"},
{faceName:"右哼哼",facePath:"46_右哼哼.gif"},
{faceName:"哈欠",facePath:"47_哈欠.gif"},
{faceName:"鄙视",facePath:"48_鄙视.gif"},
{faceName:"委屈",facePath:"49_委屈.gif"},
{faceName:"快哭了",facePath:"50_快哭了.gif"},
{faceName:"阴险",facePath:"51_阴险.gif"},
{faceName:"亲亲",facePath:"52_亲亲.gif"},
{faceName:"吓",facePath:"53_吓.gif"},
{faceName:"可怜",facePath:"54_可怜.gif"},
{faceName:"菜刀",facePath:"55_菜刀.gif"},
{faceName:"西瓜",facePath:"56_西瓜.gif"},
{faceName:"啤酒",facePath:"57_啤酒.gif"},
{faceName:"篮球",facePath:"58_篮球.gif"},
{faceName:"乒乓",facePath:"59_乒乓.gif"},
{faceName:"拥抱",facePath:"78_拥抱.gif"},
{faceName:"握手",facePath:"81_握手.gif"},
]
,
Init:function(){
var isShowImg=false;
$(".Input_text").focusout(function(){
$(this).parent().css("border-color", "#cccccc");
$(this).parent().css("box-shadow", "none");
$(this).parent().css("-moz-box-shadow", "none");
$(this).parent().css("-webkit-box-shadow", "none");
});
$(".Input_text").focus(function(){
$(this).parent().css("border-color", "rgba(19,105,172,.75)");
$(this).parent().css("box-shadow", "0 0 3px rgba(19,105,192,.5)");
$(this).parent().css("-moz-box-shadow", "0 0 3px rgba(241,39,232,.5)");
$(this).parent().css("-webkit-box-shadow", "0 0 3px rgba(19,105,252,3)");
});
$(".imgBtn").click(function(){
if(isShowImg==false){
isShowImg=true;
$(this).parent().prev().animate({marginTop:"-125px"},300);
if($(".faceDiv").children().length==0){
for(var i=0;i<ImgIputHandler.facePath.length;i++){
$(".faceDiv").append("<img title=\""+ImgIputHandler.facePath[i].faceName+"\" src=\"face/"+ImgIputHandler.facePath[i].facePath+"\" />");
}
$(".faceDiv>img").click(function(){
isShowImg=false;
$(this).parent().animate({marginTop:"0px"},300);
ImgIputHandler.insertAtCursor($(".Input_text")[0],"["+$(this).attr("title")+"]");
});
}
}else{
isShowImg=false;
$(this).parent().prev().animate({marginTop:"0px"},300);
}
});
$(".postBtn").click(function(){
alert($(".Input_text").val());
});
},
insertAtCursor:function(myField, myValue) {
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
sel.select();
} else if (myField.selectionStart || myField.selectionStart == "0") {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
基于jQuery的网页版HTML带表情的评论框源码
版权申诉
5星 · 超过95%的资源 192 浏览量
2022-03-16
10:42:58
上传
评论
收藏 183KB RAR 举报 
带表情的评论框.rar （64个子文件） 
带表情的评论框 face 
24_饥饿.gif 2KB 10_尴尬.gif 4KB 5_流泪.gif 2KB 52_亲亲.gif 1KB 44_坏笑.gif 2KB 16_酷.gif 1KB 81_握手.gif 2KB 0_微笑.gif 2KB 53_吓.gif 2KB 1_撇嘴.gif 2KB 28_憨笑.gif 3KB 57_啤酒.gif 5KB 8_睡.gif 5KB 22_白眼.gif 3KB 13_龇牙.gif 2KB 25_困.gif 2KB 7_闭嘴.gif 4KB 58_篮球.gif 3KB 34_晕.gif 2KB 48_鄙视.gif 2KB 51_阴险.gif 4KB 37_骷髅.gif 1KB 39_再见.gif 2KB 26_惊恐.gif 4KB 15_难过.gif 2KB 42_鼓掌.gif 13KB 17_冷汗.gif 3KB 21_可爱.gif 2KB 11_发怒.gif 8KB 32_疑问.gif 7KB 38_敲打.gif 2KB 23_傲慢.gif 2KB 36_衰.gif 1KB 19_吐.gif 8KB 27_流汗.gif 3KB 46_右哼哼.gif 5KB 78_拥抱.gif 2KB 31_咒骂.gif 5KB 12_调皮.gif 2KB 14_惊讶.gif 4KB 54_可怜.gif 2KB 29_大兵.gif 6KB 18_抓狂.gif 8KB 50_快哭了.gif 3KB 6_害羞.gif 3KB 4_得意.gif 2KB 43_糗大了.gif 4KB 49_委屈.gif 6KB 45_左哼哼.gif 5KB 41_抠鼻.gif 3KB 20_偷笑.gif 2KB 2_色.gif 2KB 35_折磨.gif 13KB 47_哈欠.gif 4KB 40_擦汗.gif 10KB 3_发呆.gif 2KB 59_乒乓.gif 1KB 30_奋斗.gif 2KB 56_西瓜.gif 1KB 9_大哭.gif 3KB 33_嘘.gif 4KB 55_菜刀.gif 2KB
imgs.png 5KB
index.html 8KB资源评论
云云，兰斯，艾伦，三笠。2023-08-29资源内容详尽，对我有使用价值，谢谢资源主的分享。
方世琦2022-11-29资源内容详实，描述详尽，解决了我的问题，受益匪浅，学到了。- qq_390147852024-01-21总算找到了自己想要的资源，对自己的启发很大，感谢分享~
reg183
- 粉丝: 1811
- 资源: 1万+
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减3.57元 开通VIP
