lbj96347/WebAppTouchBlink.html

## WebAppTouchBlink.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name='description' content='Touch Flash Point' >
<meta name='author' content='CashLee' >
<title>hello world</title>
<style>
body {
  margin: 0;
  padding: 0;
  min-height: 480px;
}
#touchPoint {
  position: absolute;
  padding: 20px;
  -webkit-border-radius: 20px;
  -webkit-box-shadow: 0px 0px 60px rgba(100, 100, 100, 1);
  background: rgba(255, 255, 255, 0.1);
  opacity: 0; /*初始状态 透明度为0*/
}

.addAnimate {
  -webkit-animation-name: fadeOut; /*动画名称*/
  -webkit-animation-duration: 0.5s; /*动画持续时间*/
  -webkit-animation-iteration-count: 1; /*动画次数*/
  -webkit-animation-delay: 0s; /*延迟时间*/
}

@-webkit-keyframes fadeOut {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
50% {
opacity: 1; /*中间状态 透明度为0*/
}
100% {
opacity: 0; /*结尾状态 透明度为1*/
}
}

#cashBlog {
  position : absolute;
  top: 50%;
  margin-top: -8px;
}

</style>
</head>
<body id="getBody">
  <a id="touchPoint" class=""></a>
  <p id="cashBlog" onclick="window.location='http://cashwordpress.sinaapp.com/'">CashLee李秉骏的博客<p>
</body>
<!-- I had use zepto.js if you wanna use native js code pliz ignore it and edit my code :-) -->
<script type='text/javascript' language='javascript' src='zepto.min.js'></script>
<script>

  var getBody = document.getElementById("getBody");

  getBody.addEventListener("touchstart", touchStart,false);

  function touchStart(event){
     var touch = event.touches[0];
     var startX = touch.pageX;
     var startY = touch.pageY;
     console.log("X轴:" + startX + " ;Y轴" + startY );
     $("#touchPoint").css("top", touch.pageY + "px").css("left",touch.pageX + "px").attr("class","addAnimate");
     var clean_animation = setTimeout("$('#touchPoint').attr('class', '');",500);
  }

</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name='description' content='Touch Flash Point' >
	<meta name='author' content='CashLee' >
	<title>hello world</title>
	<style>
	body {
	margin: 0;
	padding: 0;
	min-height: 480px;
	}
	#touchPoint {
	position: absolute;
	padding: 20px;
	-webkit-border-radius: 20px;
	-webkit-box-shadow: 0px 0px 60px rgba(100, 100, 100, 1);
	background: rgba(255, 255, 255, 0.1);
	opacity: 0; /初始状态透明度为0/
	}

	.addAnimate {
	-webkit-animation-name: fadeOut; /动画名称/
	-webkit-animation-duration: 0.5s; /动画持续时间/
	-webkit-animation-iteration-count: 1; /动画次数/
	-webkit-animation-delay: 0s; /延迟时间/
	}

	@-webkit-keyframes fadeOut {
	0% {
	opacity: 0; /初始状态透明度为0/
	}
	50% {
	opacity: 1; /中间状态透明度为0/
	}
	100% {
	opacity: 0; /结尾状态透明度为1/
	}
	}

	#cashBlog {
	position : absolute;
	top: 50%;
	margin-top: -8px;
	}

	</style>
	</head>
	<body id="getBody">
	<a id="touchPoint" class=""></a>
	<p id="cashBlog" onclick="window.location='http://cashwordpress.sinaapp.com/'">CashLee李秉骏的博客<p>
	</body>
	<!-- I had use zepto.js if you wanna use native js code pliz ignore it and edit my code :-) -->
	<script type='text/javascript' language='javascript' src='zepto.min.js'></script>
	<script>

	var getBody = document.getElementById("getBody");

	getBody.addEventListener("touchstart", touchStart,false);

	function touchStart(event){
	var touch = event.touches[0];
	var startX = touch.pageX;
	var startY = touch.pageY;
	console.log("X轴:" + startX + " ;Y轴" + startY );
	$("#touchPoint").css("top", touch.pageY + "px").css("left",touch.pageX + "px").attr("class","addAnimate");
	var clean_animation = setTimeout("$('#touchPoint').attr('class', '');",500);
	}

	</script>
	</html>