<!-- HTML5 -->
<!DOCTYPE html>
<html>
<head>
<title>TouchEvent测试</title>
<meta charset="utf-8">
<style type="text/css">
#ggimgid *{-webkit-transform:translateZ(0);}
*{-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color: rgba(210,210,210,0.35); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */}
.ggimg{position: absolute;z-index:999;top:0;left:0;width:100%;height:100%;}
.ggimg img{height:100%;width:100%;}
.animgalpha{
-webkit-animation-name:alphamc;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function:ease-out;
}
.animgalpha2{
-webkit-transition: -webkit-transform 1s ease-out; transition: -webkit-transform 1s ease-out; -webkit-transform-origin: 0px 0px; -webkit-transform: translate(0px, -1200px) scale(1) translateZ(0px);
}
@-webkit-keyframes alphamc {
0% {
opacity:0;
}
50% {
opacity:.5;
}
100% {
opacity:1;
}
}
</style>
</head>
<body id="bodyid">
<div class="ggimg" id="ggimgid">
<img src="http://img1.kwcdn.kuwo.cn/star/upload/10/10/1411464994186_.jpg"/>
</div>
<h2>TouchEvent测试</h2>
<br />
<div id="version" style="border:2px solid black;background-color:yellow"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<div id="result" style="border:2px solid red; color:red;">未触发事件！</div>
<div id="test" style="border:2px solid red">
<ul>
<li id="li1">测试条目1</li>
<li id="li2">测试条目2</li>
<li id="li3">测试条目3</li>
<li id="li4">测试条目4</li>
<li id="li5">测试条目5</li>
<li id="li6">测试条目6</li>
<li id="li7">测试条目7</li>
<li id="li8">测试条目8</li>
<li id="li9">测试条目9</li>
<li id="li10">测试条目10</li>
<li id="li11">测试条目11</li>
<li id="li12">测试条目12</li>
<li id="li13">测试条目13</li>
<li id="li14">测试条目14</li>
<li id="li15">测试条目15</li>
<li id="li16">测试条目16</li>
<li id="li17">测试条目17</li>
<li id="li18">测试条目18</li>
<li id="li19">测试条目19</li>
<li id="li20">测试条目20</li>
</ul>
</div>
<script type="text/javascript">
//全局变量，触摸开始位置
var startX = 0, startY = 0;
//touchstart事件
function touchSatrtFunc(evt) {
try
{
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = touch.pageX; //页面触点X坐标
var y = touch.pageY; //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchSatrtFunc：' + e.message);
}
}
//touchmove事件，这个事件无法获取坐标
function touchMoveFunc(evt) {
try
{
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = touch.pageX; //页面触点X坐标
var y = touch.pageY; //页面触点Y坐标
var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';
if (y - startY < -100) {
text += '<br/>向上滑动';
document.getElementById("ggimgid").className="ggimg animgalpha2";
document.getElementById("bodyid").className="animgalpha";
bindEvent(1);
}
//document.getElementById("ggimgid").style["webkitTransform"] = 'translate(0px,' + (y - startY) + 'px) scale(1) translateZ(0px)';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchMoveFunc：' + e.message);
}
}
//touchend事件
function touchEndFunc(evt) {
try {
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var text = 'TouchEnd事件触发';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchEndFunc：' + e.message);
}
}
//绑定事件
function bindEvent(f) {
if(f==1){
document.removeEventListener('touchstart', touchSatrtFunc, false);
document.removeEventListener('touchmove', touchMoveFunc, false);
document.removeEventListener('touchend', touchEndFunc, false);
}else{
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, false);
document.addEventListener('touchend', touchEndFunc, false);
}
}
//判断是否支持触摸事件
function isTouchDevice() {
document.getElementById("version").innerHTML = navigator.appVersion;
try {
document.createEvent("TouchEvent");
//alert("支持TouchEvent事件！");
bindEvent(); //绑定事件
}
catch (e) {
//alert("不支持TouchEvent事件！" + e.message);
}
}
window.onload = isTouchDevice;
</script>
</body>
</html>
<!-- HTML5 -->
<!DOCTYPE html>
<html>
<head>
<title>TouchEvent测试</title>
<meta charset="utf-8">
<style type="text/css">
#ggimgid *{-webkit-transform:translateZ(0);}
*{-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color: rgba(210,210,210,0.35); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */}
.ggimg{position: absolute;z-index:999;top:0;left:0;width:100%;height:100%;}
.ggimg img{height:100%;width:100%;}
.animgalpha{
-webkit-animation-name:alphamc;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function:ease-out;
}
.animgalpha2{
-webkit-transition: -webkit-transform 1s ease-out; transition: -webkit-transform 1s ease-out; -webkit-transform-origin: 0px 0px; -webkit-transform: translate(0px, -1200px) scale(1) translateZ(0px);
}
@-webkit-keyframes alphamc {
0% {
opacity:0;
}
50% {
opacity:.5;
}
100% {
opacity:1;
}
}
</style>
</head>
<body id="bodyid">
<div class="ggimg" id="ggimgid">
<img src="http://img1.kwcdn.kuwo.cn/star/upload/10/10/1411464994186_.jpg"/>
</div>
<h2>TouchEvent测试</h2>
<br />
<div id="version" style="border:2px solid black;background-color:yellow"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<div id="result" style="border:2px solid red; color:red;">未触发事件！</div>
<div id="test" style="border:2px solid red">
<ul>
<li id="li1">测试条目1</li>
<li id="li2">测试条目2</li>
<li id="li3">测试条目3</li>
<li id="li4">测试条目4</li>
<li id="li5">测试条目5</li>
<li id="li6">测试条目6</li>
<li id="li7">测试条目7</li>
<li id="li8">测试条目8</li>
<li id="li9">测试条目9</li>
<li id="li10">测试条目10</li>
<li id="li11">测试条目11</li>
<li id="li12">测试条目12</li>
<li id="li13">测试条目13</li>
<li id="li14">测试条目14</li>
<li id="li15">测试条目15</li>
<li id="li16">测试条目16</li>
<li id="li17">测试条目17</li>
<li id="li18">测试条目18</li>
<li id="li19">测试条目19</li>
<li id="li20">测试条目20</li>
</ul>
</div>
<script type="text/javascript">
//全局变量，触摸开始位置
var startX = 0, startY = 0;
//touchstart事件
function touchSatrtFunc(evt) {
try
{
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = touch.pageX; //页面触点X坐标
var y = touch.pageY; //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchSatrtFunc：' + e.message);
}
}
//touchmove事件，这个事件无法获取坐标
function touchMoveFunc(evt) {
try
{
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = touch.pageX; //页面触点X坐标
var y = touch.pageY; //页面触点Y坐标
var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';
if (y - startY < -100) {
text += '<br/>向上滑动';
document.getElementById("ggimgid").className="ggimg animgalpha2";
document.getElementById("bodyid").className="animgalpha";
bindEvent(1);
}
//document.getElementById("ggimgid").style["webkitTransform"] = 'translate(0px,' + (y - startY) + 'px) scale(1) translateZ(0px)';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchMoveFunc：' + e.message);
}
}
//touchend事件
function touchEndFunc(evt) {
try {
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var text = 'TouchEnd事件触发';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchEndFunc：' + e.message);
}
}
//绑定事件
function bindEvent(f) {
if(f==1){
document.removeEventListener('touchstart', touchSatrtFunc, false);
document.removeEventListener('touchmove', touchMoveFunc, false);
document.removeEventListener('touchend', touchEndFunc, false);
}else{
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, false);
document.addEventListener('touchend', touchEndFunc, false);
}
}
//判断是否支持触摸事件
function isTouchDevice() {
document.getElementById("version").innerHTML = navigator.appVersion;
try {
document.createEvent("TouchEvent");
//alert("支持TouchEvent事件！");
bindEvent(); //绑定事件
}
catch (e) {
//alert("不支持TouchEvent事件！" + e.message);
}
}
window.onload = isTouchDevice;
</script>
</body>
</html>