jQuery評論框插入QQ表情特效代碼下載



13 51 18



特效描述:jQuery 評論框插入 QQ表情,jQuery評論框插入QQ表情特效代碼下載

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

2. HTML代碼

<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>
<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;
        var restoreTop = myField.scrollTop;
        myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
        if (restoreTop > 0) {
            myField.scrollTop = restoreTop;
        }
        myField.focus();
        myField.selectionStart = startPos + myValue.length;
        myField.selectionEnd = startPos + myValue.length;
    } else {
        myField.value += myValue;
        myField.focus();
    }
}
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 文字提示框 提示文字 文本框 text文本框 表情 qq表情 表情插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

林肯娱乐怎么赚钱