H 5モバイルWebページタッチボタン効果実現-アナログボタンhover効果実現

1170 ワード

モバイル端末のタッチボタンの効果は、ユーザーに何かが起こっていることを明らかにすることができ、比較的良い体験ですが、モバイルデバイスにはマウスポインタがありません.cssを使用するhoverは私たちのニーズを満たすことができません.幸いなことに、海外ではcssをアクティブにするactive効果があります.コードは以下の通りです.


	
		
		
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
		<style>
		 .btn{
		 	display: block;
		 	position: relative;
		 	top: 100px;
		 	margin: 20px;
		 	width: 200px; 
		 	height: 50px;
		 	line-height: 50px;
		 	text-align: center;
		 	border-radius: 5px;
		 	font-size: 18px;
		 	color: salmon;
		 	background-color: skyblue;
		 	}
		 	.btn-on{
		 		background-color: slateblue;
		 		
		 	}
		 	 
		</style>
	
	
		<div class="btn"/>
		
		<script>
		var btn=document.querySelector(".btn");
		btn.ontouchstart=function(){
			this.className="btn btn-on";
		}
		btn.ontouchend=function(){
			this.className="btn";
		}
		</script>
	

</code></pre> 
  <br/> 
  <br/> 
 </div> 
</div>
                            </div>
                        </div>