工作中的碎片

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); }
	}