特效介绍
一款基于jQuery的QQ表情插件,点击输入框下面的笑脸,弹出QQ经典表情,点击表情,表情代码会显示在输入框,点击输入框下面的提交按钮,表情就会被提交并被显示。可用于博客等留言板,效果非常不错。
使用方法
1、在head引入下面的js代码:
02 | <script type= "text/javascript" src= "jquery.qqFace.js" ></script> |
03 | <script type= "text/javascript" > |
05 | $( '.emotion' ).qqFace({ |
10 | $( ".sub_btn" ).click( function (){ |
11 | var str = $( "#saytext" ).val(); |
12 | $( "#show" ).html(replace_em(str)); |
16 | function replace_em(str){ |
17 | str = str.replace(/\</g, '<' ); |
18 | str = str.replace(/\>/g, '>' ); |
19 | str = str.replace(/\n/g, '<br/>' ); |
20 | str = str.replace(/\[em_([0-9]*)\]/g, '<img src="face/$1.gif" border="0" />' ); |
2、在head引入下面的CSS代码,当然,这不是必须的,您可以自定义样式:
02 | .comment{ width : 680px ; margin : 20px auto ; position : relative } |
03 | .comment h 3 { height : 28px ; line-height : 28px } |
04 | .com_form{ width : 100% ; position : relative } |
05 | .input{ width : 99% ; height : 60px ; border : 1px solid #ccc } |
06 | .com_form p{ height : 28px ; line-height : 28px ; position : relative } |
07 | span.emotion{ width : 42px ; height : 20px ; background : url ( icon .gif) no-repeat 2px 2px ; padding-left : 20px ; cursor : pointer } |
08 | span.emotion:hover{ background-position : 2px -28px } |
09 | .qqFace{ margin-top : 4px ; background : #fff ; padding : 2px ; border : 1px #dfe6f6 solid ;} |
10 | .qqFace table td{ padding : 0px ;} |
11 | .qqFace table td img{ cursor : pointer ; border : 1px #fff solid ;} |
12 | .qqFace table td img:hover{ border : 1px #0066cc solid ;} |
13 | # show { width : 680px ; margin : 20px auto } |
15 | position : absolute ; right : 0px ; top : 0 ; |
16 | display : inline- block ; |
19 | vertical-align : baseline ; |
24 | font : 14px / 100% Arial , Helvetica , sans-serif ; |
25 | padding : . 5em 2em . 55em ; |
26 | text-shadow : 0 1px 1px rgba( 0 , 0 , 0 ,. 6 ); |
27 | -webkit-border-radius: 3px ; |
28 | -moz-border-radius: 3px ; |
30 | -webkit-box-shadow: 0 1px 2px rgba( 0 , 0 , 0 ,. 2 ); |
31 | -moz-box-shadow: 0 1px 2px rgba( 0 , 0 , 0 ,. 2 ); |
32 | box-shadow: 0 1px 2px rgba( 0 , 0 , 0 ,. 2 ); |
34 | border : solid 1px #538312 ; |
36 | background : -webkit-gradient(linear, left top , left bottom , from( #7db72f ), to( #4e7d0e )); |
37 | background : -moz-linear-gradient( top , #7db72f , #4e7d0e ); |
38 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#7db72f' , endColorstr= '#4e7d0e' ); |
42 | background : -webkit-gradient(linear, left top , left bottom , from( #6b9d28 ), to( #436b0c )); |
43 | background : -moz-linear-gradient( top , #6b9d28 , #436b0c ); |
44 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#6b9d28' , endColorstr= '#436b0c' ); |
3、在您的网页中,需要使用评论的地方,加入下面的代码:
4 | < textarea class = "input" id = "saytext" name = "saytext" ></ textarea > |
5 | < p >< input type = "button" class = "sub_btn" value = "提交" >< span class = "emotion" >表情</ span ></ p > |
部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!