1、owo是必由之路的意思，是Only Way Out的缩写。

重点词汇解析：

way　 基本词汇 　

英 [weɪ] 　 　  美 [weɪ] 　 　

n. 路；路线；方法；方式；作风；样子；方向；出入通道；距离；时间段；地区；方面；情况

adv. 非常；远远地

adj. 途中的，中途的

We lost the way in the dark.

我们在黑夜中迷路了。

ask the way 问路

bar sb's way 妨碍某人通行

2、OwO是一款可爱且实用的js表情符号插件。OwO表情符号插件可以在文本域或输入框中输入表情符号，它支持颜文字、Emoji、图片等，支持移动端，表情数据从一个可以自定义的json接口读取。

词汇的同近义词

road　 基本词汇 　

英 [rəʊd] 　 　  美 [roʊd] 　 　

n. 路；道路；途径；方法

The road was blocked by a huge rock.

道路被一块大石头堵住了。

concrete the road 用混凝土浇筑路面

extend a road 延长公路

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

代码整体结构。