目標是偵測平板上的頁面,當左右滑的時候,上下層目錄,斜對角預留。
在browser上(IE/FF/Opera)是ok,可是到android上,不吃就是不吃,測試OS是x86 2.2 版,
另外,同頁面如果連結要#top回上頁,第二次點就會失效,在pc上也是沒有問題。
除了css滑動,本來的滑移動畫,在web頁面或web kit框架上,可以派上用場嗎?
碰撞中...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> gesture </TITLE>
</HEAD>
<BODY scroll="no" style="overflow:hidden; margin:0px;">
<script language="JavaScript1.2">
<!--
var mNmoveScale=100;
var mAxPos=new Array();
var mAyPos=new Array();
var mNmovingX,mNmovingY;
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE);
document.onmousedown = getMouseXYdown;
document.onmouseup = getMouseXYup;
document.onmousemove = getMouseXY;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
mNmovingX=tempX;
mNmovingY=tempY;
return true;
}
function getMouseXYdown(e) {
mAxPos[0] = mNmovingX
mAyPos[0] = mNmovingY;
var oDataX=document.getElementById('mNmouseX');
var oDataY=document.getElementById('mNmouseY');
oDataX.innerHTML=mAxPos[0];
oDataY.innerHTML=mAyPos[0];
}
function getMouseXYup(e)
{
mAxPos[1] = mNmovingX
mAyPos[1] = mNmovingY;
var oDataX=document.getElementById('mNmouseXed');
var oDataY=document.getElementById('mNmouseYed');
oDataX.innerHTML=mAxPos[1];
oDataY.innerHTML=mAyPos[1];
setTimeout("getMouseCmd()",200);
}
function getMouseCmd()
{
var mSxMove,mSyMove;
var mNxMoved=mAxPos[1]-mAxPos[0];
var mNyMoved=mAyPos[1]-mAyPos[0];
var oDataX=document.getElementById('oDataX');
var oDataY=document.getElementById('oDataY');
var oDataCMD=document.getElementById('oDataCMD');
oDataX.innerHTML=mNxMoved;
oDataY.innerHTML=mNyMoved;
if(mNxMoved>mNmoveScale) mSxMove='R';
if(mNxMoved<-mNmoveScale) mSxMove='L';
if(mNxMoved<mNmoveScale && mNxMoved>-mNmoveScale) mSxMove='M';
if(mNyMoved>mNmoveScale) mSyMove='D';
if(mNyMoved<-mNmoveScale) mSyMove='U';
if(mNyMoved<mNmoveScale && mNyMoved>-mNmoveScale) mSyMove='M';
oDataCMD.innerHTML=mSxMove+mSyMove;
getMouseClear();
}
function getMouseClear(){
mAxPos=new Array();
mAyPos=new Array();
}
//-->
</script>
<div style="visibility: visible;">
<span id="mNmouseX">0</span>:<span id="mNmouseY">0</span>:
<span id="mNmouseXed">0</span>:<span id="mNmouseYed">0</span>:
<span id="oDataX"></span>:<span id="oDataY"></span><P>
</div>
<span id="oDataCMD"></span><P>
</BODY>
</HTML>