工做中的碎片

1.解決移動端在輸入完成後，頁面被頂上去的問題，監聽輸入狀態，輸入框失去焦點後，滾動條滾動到頂部位置

var bfscrolltop = document.body.scrollTop;
$("input").focus(function(){
//	alert(document.body.scrollTop);
}).blur(function(){
	 document.body.scrollTop = bfscrolltop;
 });
複製代碼

或者用

$("input").on("blur",function(){
	window.scroll(0,0);//失焦後強制讓頁面歸位
});
複製代碼

2.animation-fill-mode 屬性的應用

發現這個屬性，主要是想在css動畫完成以後停在最後一幀。

nimation-fill-mode 屬性規定動畫在播放以前或以後，其動畫效果是否可見。他的值有：none|forwards|backwards|both;

none： 不改變默認行爲。

forwards： 當動畫完成後，保持最後一個屬性值。

backwards： 在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）。

both： 向前和向後填充模式都被應用。

這裏我使用到的是forwards，可是IE9 以及更早的版本不支持 animation-fill-mode 屬性。

可是我們也可使用下面這種方法

.datu{animation: scaleImg linear 4s;-webkit-animation: scaleImg linear 4s; /*-webkit-animation-fill-mode:forwards*/ transform: scale(0.375);}
    
	@-webkit-keyframes scaleImg {
	    0% { -webkit-transform: scale(1.2)；}
	    20% { -webkit-transform: scale(1.2); }
	    100% { -webkit-transform: scale(0.375);}
	}
	@keyframes scaleImg {
	    0% { -webkit-transform: scale(1.2); }
	    20% { -webkit-transform: scale(1.2); }
	    100% { -webkit-transform: scale(0.375); }
	}
複製代碼