新浪微博textarea效果

     
 <style type="text/css">
       .input_detail
        {
            margin: 2px 0px 0px 2px;
            padding: 5px;
            border: 1px solid #999;
            font-size: 14px;
            font-family: Tahoma, 宋體;
            ord-wrap: break-word;
            line-height: 18px;
            overflow-y: hidden;
            overflow-x：hidden;
            outline: none;
            width: 544px;
            height: 74px;
        }
        .imgtext
        {
            margin-right: 10px;
        }
        #fabu
        {
            text-decoration: none;
            color: #D1D1D1;
        }
        #fabu:hover, #fabu:link, #fabu:visited
        {
            text-decoration: none;
            color: #D1D1D1;
        }
        
        .divfabu
        {
            height: 22px;
            width: 70px;
            float: right;
            background: #F2F2F2;
            padding-top: 6px;
            text-align: center;
            border: 1px solid #C6C6C6;
            margin-right: 50px;
            margin-top: 2px;
            color: #D1D1D1;
            font-size: 12;
            font-family: 宋體;
            font-weight: bold;
            border-radius: 5px;
        }
        .textareaAddcss
        {
            height: 22px;
            width: 70px;
            float: right;
            background: #E54140;
            padding-top: 6px;
            text-align: center;
            border: 1px solid #C6C6C6;
            margin-right: 50px;
            margin-top: 2px;
            color: #ffffff;
            font-size: 12;
            font-family: 宋體;
            font-weight: bold;
            border-radius: 5px;
        }
        .textareaAddcss1
        {
            height: 22px;
            width: 70px;
            float: right;
            background: #F65454;
            padding-top: 6px;
            text-align: center;
            border: 1px solid #C6C6C6;
            margin-right: 50px;
            margin-top: 2px;
            color: #ffffff;
            font-size: 12;
            font-family: 宋體;
            font-weight: bold;
            border-radius: 5px;
        }
        
        #showWeiBo
        {
            width:100%;
            border:2px solid red;
            margin-top:10px;
            }
               </style>

 <script type="text/javascript">
        $(function () {
     
            //發佈按鈕的單擊事件
            $('#divfabu').click(function () {
                if ($('#textarea1').val() == '') {
                    //單擊發布按鈕時，如果textarea中的內容爲空，設置text背景的閃動效果
                    error("textarea1", 2);
                }
                else {
                    //單擊發布按鈕時，如果textarea中的內容不爲空---------
                    out();


                }
            });


            //textarea  keyup的時候設置發佈按鈕的樣式
            $('#textarea1').keyup(function () {
                $('#divfabu').removeClass('divfabu');
                $('#divfabu').addClass('textareaAddcss');


                if ($('#textarea1').val() != '') {
                    $('#divfabu').mouseover(function () {
                        $('#divfabu').removeClass('textareaAddcss');
                        $('#divfabu').addClass('textareaAddcss1');
                    });
                    $('#divfabu').mouseleave(function () {
                        $('#divfabu').removeClass('textareaAddcss1');
                        $('#divfabu').addClass('textareaAddcss');
                    });
                    $('#divfabu').click(function () {
                    });
                }
                else {
                    $('#divfabu').mouseover(function () {
                        $('#divfabu').removeClass('textareaAddcss');
                        $('#divfabu').removeClass('textareaAddcss1');
                        $('#divfabu').addClass('divfabu');
                    });
                    $('#divfabu').mouseleave(function () {
                        $('#divfabu').removeClass('textareaAddcss');
                        $('#divfabu').removeClass('textareaAddcss1');
                        $('#divfabu').addClass('divfabu');
                    });
                    $('#divfabu').click(function () {
                        error("textarea1", 2);
                    });
                    $('#divfabu').removeClass('textareaAddcss1');
                    $('#divfabu').removeClass('textareaAddcss');
                    $('#divfabu').addClass('divfabu');
                }
            });


            //textarea下面的圖標效果
            $('#imgbiaoqing').mouseover(function () {
                $(this).attr("src", "imgs/yi/biaoqing2.jpg");
            });
            $('#imgbiaoqing').mouseleave(function () {
                $(this).attr("src", "imgs/yi/biaoqing1.jpg");
            });
            $('#imgtupian').mouseover(function () {
                $(this).attr("src", "imgs/yi/tupian2.jpg");
            });
            $('#imgtupian').mouseleave(function () {
                $(this).attr("src", "imgs/yi/tupian1.jpg");
            });
            $('#imgshipin').mouseover(function () {
                $(this).attr("src", "imgs/yi/shipin2.jpg");
            });
            $('#imgshipin').mouseleave(function () {
                $(this).attr("src", "imgs/yi/shipin1.jpg");
            });
            $('#imghuati').mouseover(function () {
                $(this).attr("src", "imgs/yi/huati2.jpg");
            });
            $('#imghuati').mouseleave(function () {
                $(this).attr("src", "imgs/yi/huati1.jpg");
            });

            // 綁定表情
            $('#imgbiaoqing').SinaEmotion($('.input_detail'));
        });

        // 測試本地表情解析
        function out() {
            var inputText = $('.input_detail').val();
            $('#out').html(AnalyticEmotion(inputText));
        }


        //textrea背景閃動效果
        function normal(id, times) {
            var obj = $("#" + id);
            obj.css("background-color", "#FFF");
            if (times < 0) {
                return;
            }
            times = times - 1;
            setTimeout("error('" + id + "'," + times + ")", 150);
        }
        function error(id, times) {
            var obj = $("#" + id);
            obj.css("background-color", "#F6CECE");
            times = times - 1;
            setTimeout("normal('" + id + "'," + times + ")", 150);
        }

    </script>

  <!--Center主體的中間開始-->
            <div class="divCenterRight1" id="divCenterRight">
                <textarea id="textarea1" rows="" class="input_detail" tabindex="1" title="微博輸入框"
                    name=""></textarea>
                <br />
                <img src="imgs/yi/biaoqing1.jpg" class="imgtext" id="imgbiaoqing" />
                <img src="imgs/yi/tupian1.jpg" class="imgtext" id="imgtupian" />
                <img src="imgs/yi/shipin1.jpg" class="imgtext" id="imgshipin" />
                <img src="imgs/yi/huati1.jpg" class="imgtext" id="imghuati" />
                <!--id是analytic的btn爲測試本地表情解析-->
                <input id="analytic" type="button" value="解析" οnclick="out()">
                <div id="divfabu" class="divfabu">
                    <a id="fabu" href="javascript:void(0)" οnclick="">發佈</a></div>
                <!--id是out的div爲測試--測試本地表情解析-->
                <div id="out" style="height: auto; width: 400px; border: 1px dashed #000000; padding: 10px;">
                </div>
                <div id="showWeiBo">
                    sdfdsfds</div>
            </div>
            <!--Center主體的中間結束-->