1
新建html文档。
2
准备好需要用到的图标。
3
书写hmtl代码。
<div id="Smohan_FaceBox">
<textarea name="text" id="Smohan_text" class="smohan_text"></textarea>
<p><a href="#" class="face" title="表情"></a>
<button class="button" id="Smohan_Showface">显示表情</button>
</p>
</div>
<!--/表情盒子-->
<!--解析表情-->
<div id="Zones"></div>
4
书写css代码。
* { margin: 0padding: 0}
html, body { margin: 0padding: 0}
body { background: url(../images/whiteBg.png) repeatfont: normal 14px/14px 'Microsoft JhengHei', 'Microsoft YaHei', Arial, sans-serifcolor: #333333}
h3 { width: 760pxheight: 50pxline-height: 50pxfont-size: 30pxfont-weight: 600text-align: centeroverflow: hiddenmargin: 50px auto 0px autocolor: #777777text-shadow: 0px 1px 0px rgba(255, 255, 255, 1)}
h4 { width: 740pxpadding-right: 20pxheight: 30pxline-height: 30pxfont-size: 16pxfont-weight: 600text-align: rightoverflow: hiddenmargin: 0px autocolor: #777777text-shadow: 0px 1px 0px rgba(255, 255, 255, 1)}
#Smohan_FaceBox { width: 760pxheight: autoposition: relativemargin: 50px automin-height: 160px}
textarea.smohan_text { display: blockwidth: 708pxheight: 78pxpadding: 10px 20pxbackground: url(../images/facebg_1.png) 0px 0px repeat-xborder: 1px solid #cacacaoutline: noneposition: relativeoverflow: hidden}
#Smohan_FaceBox p { display: blockwidth: 748pxpadding: 10px 0px}
.face { display: blockwidth: 20pxheight: 20pxbackground: url(../images/facebg_1.png) 0px -100px no-repeatfloat: left}
.face:hover, .face.in { background-position: 0px -120px}
.button { display: inline-blockwidth: 80pxheight: 35pxline-height: 35pxbackground: #6C3border: 1px solid #6C0text-align: centercursor: pointercolor: #fffffffloat: righttext-shadow: 0px -1px 0px rgba(153, 153, 153, 0.6)}
img { border: 0 none}
#SmohanFaceBox { display: blockwidth: 352pxheight: 187pxposition: absolutetop: 130pxleft: -50pxz-index: 9999}
#SmohanFaceBox .Corner { display: blockwidth: 28pxheight: 15pxbackground: url(../images/facebg_1.png) -32px -100px no-repeatposition: absoluteleft: 45pxtop: 0z-index: 100}
#SmohanFaceBox .Content { display: blockwidth: 350pxheight: 185pxpadding: 10pxbackground: #ffffffborder: 1px solid #cfcfcfz-index: 99margin: 14px 0px 0px 0pxbox-shadow: 0px 1px 10px rgba(204, 204, 204, 1)border-radius: 2px}
#SmohanFaceBox .Content h3 { margin: 0padding: 0width: 350pxheight: 30pxline-height: 26pxdisplay: blockfont-size: 14pxtext-align: left}
#SmohanFaceBox .Content h3 span { float: left}
#SmohanFaceBox .Content h3 .close { display: inline-blockwidth: 16pxheight: 16pxbackground: url(../images/facebg_1.png) -30px -120pxfloat: rightcursor: pointer}
#SmohanFaceBox .Content h3 .close:hover { background-position: -46px -120px}
#SmohanFaceBox .Content ul { margin: 5px 0px 0px 0pxpadding: 0list-style-type: none}
#SmohanFaceBox .Content ul li { display: inline-blockwidth: 22pxheight: 22pxpadding: 2pxborder: 1px solid #f8f8f8float: left}
#SmohanFaceBox .Content ul li:hover { border-color: #6C3}
#Zones { display: blockwidth: 696pxheight: autopadding: 26pxposition: relativebackground: #fffborder: 2px dashed #cacacamargin: 30px autodisplay: none}
5
书写并添加js代码。
<script>
$(function (){
$("a.face").smohanfacebox({
Event : "click", //触发事件
divid : "Smohan_FaceBox", //外层DIV ID
textid : "Smohan_text" //文本框 ID
})
//解析表情 $('#Zones').replaceface($('#Zones').html())
})
//Demo测试
$('#Smohan_Showface').click(function() {
$('#Zones').fadeIn(360)
$('#Zones').html($('#Smohan_text').val())
$('#Zones').replaceface($('#Zones').html())//替换表情
})
</script>
6
代码整体结构。
css只能通过背景图形式来给文档添加图片background-image: url(图片地址)
background: url(图片地址) 0 0 no-repeat
.img1{
background-image: url(1.jpg)
background-size: 200px
}
<div class="img1"></div>
