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
代码整体结构。
需要准备的材料分别有：电脑、chrome浏览器、html编辑器。
1、首先打开html编辑器，新建一个html文件，例如：index.html。
2、在index.html中的<body>标签中，输入以下html代码：
<input type="text" placeholder="请输入账号" />
<input type="password" placeholder="请输入密码" />
3、浏览器运行index.html页面，此时的输入框有了提示文字“请输入账号”，密码框有了提示文字“请输入密码”。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）