web前端小案例-javascript制作百度神回复

web前端群，189394454，有视频、源码、学习方法等大量干货分享

👇html代码：

<div id="face"><p>百度神回复</p>
    <ul>
        <li><img src="images/qw_cat_0001.png" /></li>
        <li><img src="images/qw_cat_0002.png" /></li>
        <li><img src="images/qw_cat_0003.png" /></li>
        <li><img src="images/qw_cat_0004.png" /></li>
        <li><img src="images/qw_cat_0005.png" /></li>
        <li><img src="images/qw_cat_0006.png" /></li>
        <li><img src="images/qw_cat_0007.png" /></li>
        <li><img src="images/qw_cat_0008.png" /></li>
        <li><img src="images/qw_cat_0009.png" /></li>
    </ul>
</div>
<!--表情结束-->


<div class="gray"></div>
<!--内容回复开始-->
<div id="message">
    <img src="images/qw_cat_0001.gif"  class="bimg"/>
    <div class="messCon"></div>
    <div class="write">
        <input type="text" class="in"/><input type="button" class="but" value="发表"/>
    </div>
</div>

👇css代码：

<style type="text/css">
*{padding:0px; margin:0px;}
body{background:#ffffcc;}
#face{width:320px;height:147px; border:1px solid #ddd; position:fixed; right:-290px;top:200px; z-index:333; background:#fff;}
#face p{width:14px; height:107px;background:#000;color:#fff; font-size:14px;padding:20px 8px; float:left;}
#face ul li{list-style-type:none; float:left; height:42px;width:90px;
            margin-left:5px; margin-top:5px;}

#message{width:480px;height:450px;position:fixed; left:400px; top:200px;
z-index:444;display:none;}
#message .messCon{width:200px;height:140px;position:absolute;
            left:170px; top:40px;}
#message .write{height:40px; border:1px solid #ddd;display:none;}
#message .write input.in{width:390px;height:40px;border:0px; background:#fff; }
#message .write input.but{width:88px; height:40px; border:0px; background:#ff0099;
            color:#fff; text-align:Center; }
#Con{width:1000px; margin:0px auto; line-height:35px; font-size:14px; position:relative;}
.gray{width:100%;height:100%; position:fixed; background:rgba(0,0,0,0.5);top:0px;z-index:33;display:none;}
</style>

👇javascript代码：

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>  
<script type="text/javascript">
var mark=1;
$("#face p").click(function(){
    if(mark==1){
        $("#face").animate({right:"0px"},500);
        mark=2;
    }else if(mark==2){
        $("#face").animate({right:"-290px"},500);
        mark=1;
    }
});
    $("#face ul li").click(function(){
        $(".messCon").text("");
        $(".gray").show();
        //换图片
        var _index=$(this).index()+1;
        /*获取浏览器的宽度减去图片的宽度算出图片展示的left坐标*/
        var left = ($(window).width() - 400)/2;
        var params={"width":"900px","height":"900px","opacity":0.2};
        var params2={"width":"400px","height":"400px","opacity":1};
        $("#message").show();
        $("#message img.bimg").attr("src","images/qw_cat_000"+_index+".gif").css(params).animate(params2,500,function(){
            $("#message .write").show();
            /*颤抖整个文字div*/
            shake($("#Con"));
        });

        /*文本输入框的键盘事件*/
        $(".in").off().keyup(function(){
            changeFont($(this),_index);
        }).keydown(function(){
            changeFont($(this),_index);
        });

    });
    /*输入框的键盘事件*/
                function changeFont($this,index){
                    /*切换图片的空模板，*/
                    $("#message img.bimg").attr("src","images/template/qw_cat_000"+index+".gif");
                    /*获取文本框的文件*/
                    var v = $this.val();
                    /*获取文本框的长度*/
                    var len =v.length;
                    /*如果过长就返回*/
                    if(len>30)return;
                    /*设定字体大小*/
                    var s = 24;
                    if(len==1)s = 120;/*如果一个文字就是font-size:90px;*/
                    if(len==2)s = 90;/*如果2个文字就是font-size:64px;*/
                    if(len==3)s = 60;/*如果3个文字就是font-size:52px;*/
                    if(len==4)s = 50;/*如果4个文字就是font-size:45px;*/
                    if(len==5)s = 41;/*如果5个文字就是font-size:41px;*/
                    if(len==6)s = 38;/*如果6个文字就是font-size:38px;*/
                    if(len==7)s = 35;/*如果7个文字就是font-size:35px;*/
                    if(len==8)s = 28;/*如果8个文字就是font-size:28px;*/
                    /*将输入的文本框放入到悬浮框中*/
                    $(".messCon").css("font-size",s).text(v);

                    
                }

            /*颤抖方法*/
            function shake(dom){
                    p = [4, 8, 4, 0, -4, -8, -4, 0];
                    p = p.concat(p.concat(p));
                    timerId = setInterval(fx, 13);
                    function fx () {

                        dom.css("left",p.shift()+"px");

                        if (p.length <= 0) {
                            dom.css("left","0px");
                            clearInterval(timerId);
                        };
                    };
                
                //return this;
            };          
</script>

百度神回复