?

???????以前在花瓣上看到的一個搜索框交互效果，找不到了。搜索標志獲得焦點的時候拉伸成搜索框，失去焦點的時候縮回搜索標志，輸入內容回車，則會先縮回搜索標志，而后旋轉模擬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();

????????????????????/*判斷伸縮動畫是否執(zhí)行完，如果執(zhí)行完畢則旋轉模擬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>

?

轉載于:https://www.cnblogs.com/k13web/p/4139512.html

總結

以上是生活随笔為你收集整理的可伸缩搜索框 旋转实现loading的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。