可伸缩搜索框 旋转实现loading

 

       以前在花瓣上看到的一个搜索框交互效果，找不到了。搜索标志获得焦点的时候拉伸成搜索框，失去焦点的时候缩回搜索标志，输入内容回车，则会先缩回搜索标志，而后旋转模拟loading。DEMO下载效果如图：

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

兼容浏览器：Firefox   Chrome   Safafi   Opera等标准浏览器

html：

    <div id="transform">
        <p><input type="text"></p>
        <span></span>
    </div>

 

css：

    html {
        background: #f5f5f5;
    }
    #transform {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -25px 0 0 -25px;
    }
    #transform p {
        width: 24px;
        height: 24px;
        border-radius: 15px;
        padding: 3px;
        background: #02a0e9;
        box-shadow: 0 1px 1px rgba(0,0,0,0.2) inset;
        position: absolute;
        top: 10px;
        left: 10px;
        margin: 0;
    }
    #transform span {
        content: "";
        display: block;
        width: 15px;
        height: 6px;
        background: #02a0e9;
        border-radius: 0 3px 3px 0;
        position: absolute;
        top: 36px;
        left: 31px;
        box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #transform input {
        font: 12px/24px Arial, Helvetica, sans-serif,"微软雅黑";
        color: #02a0e9;
        display: block;
        border-radius: 12px;
        width: 14px;
        height: 24px;
        padding: 0 5px;
        background: #fff;
        border: 0;
        box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    }

    #transform input:focus {
        outline: 0;
    }

 

javascript：

    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $("#transform>p>input[type='text']").focusin(function() {
            var _this = $(this);
            open();

            /*按下回车*/
            $(this).keypress(function(e) {
                var key = e.which;
                if (key == 13) {
                    close();
                    _this.val("").blur();

                    /*判断伸缩动画是否执行完，如果执行完毕则旋转模拟loading*/
                    var wait=setInterval(function(){
                        if((!$("#transform").is(":animated")) && (!$("#transform>p").is(":animated")) && (!$("#transform>p>input").is(":animated")) && (!$("#transform>span").is(":animated"))) {
                            turn();
                            clearInterval(wait);
                        }
                    },200);
                }
            });
        });

        $("#transform>p>input[type='text']").focusout(function() {
            close();
        });

        /*搜索框拉伸*/
        function open() {
            $("#transform").animate({"width":"150px"}, 500);
            $("#transform>p").animate({"width":"124px"}, 500);
            $("#transform>p>input").animate({"width":"114px"}, 500);
            $("#transform>span").animate({"left":"131px"}, 500);
        }

        /*搜索框还原*/
        function close() {
            $("#transform").animate({"width":"50px"}, 500);
            $("#transform>p").animate({"width":"24px"}, 500);
            $("#transform>p>input").animate({"width":"14px"}, 500);
            $("#transform>span").animate({"left":"31px"}, 500);
        }

        /*旋转loading*/
        function turn() {
            var dom = document.getElementById("transform");
            var r = 0,style;
            function t() {
                r += 20;
                style = "-webkit-transform: rotate(" + r + "deg);-moz-transform: rotate(" + r + "deg);-o-transform: rotate(" + r + "deg);transform: rotate(" + r + "deg)";
                dom.setAttribute("style", style);
                if(r >= 1800){
                   clearInterval(timer); 
                }
            }
            var timer = setInterval(t,40); 
        }
    })
    </script>