Chair's blog: plurk 時間軸

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<p id="alldiv" style="height: 200px;border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; background-color: #CCFFCC" onmouseup="drop()" onmousedown="grab()" />

<div style="border-style:solid; border-width:1px; left: 175px; top:80px; position:absolute;background-color: #FFFFFF;white-space:nowrap">
<span>Chair</span>
<span>說</span>
<span>原來解釋 plurk 還真不簡單...</span>
</div>

<div style="border-style:solid; border-width:1px; left: 385px;top:120px; position:absolute;background-color: #FFFFFF;white-space:nowrap">
<span>Chair</span>
<span>說</span>
<span>plurk 真不簡單...</span>
</div>

</p>

<table border="1" style="border-collapse: collapse" cellpadding="3">
<tr><td align="center">parameter</td><td align="center">value</td></tr>
<tr><td align="right">navigator.appName</td><td><span id="span_browser"></span></td></tr>
<tr><td align="right">window.event(IE)</td><td><span id="span_winevent"></span></td></tr>
<tr><td align="right">auto event(FF)</td><td><span id="span_autevent"></span></td></tr>
<tr><td align="right">algorithm</td><td><span id="span_algor"></span></td></tr>
<tr><td align="right">mousex,y</td><td><span id="span_mousex"></span>,<span id="span_mousey"></span></td></tr>
<tr><td align="right">grabx,y</td><td><span id="span_grabx"></span>,<span id="span_graby"></span></td></tr>
<tr><td align="right">elex,y</td><td><span id="span_elex"></span></td></tr>
</table>

<script language="javascript">

var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 0;
var oriy = 0;
var elex = 0;

var elex = new Array();
var objdivleft = new Array();

document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE █有移動事件就 update
 
function getMouseXY(e) // works on IE6,FF,Moz,Opera7
{ 
  if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)

  if (e)
  { 
    if (e.pageX || e.pageY)
    { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
      mousex = e.pageX;
      mousey = e.pageY;
      algor = '[e.pageX]';
      if (e.clientX || e.clientY) algor += ' [e.clientX] '
    }
    else if (e.clientX || e.clientY)
    { // works on IE6,FF,Moz,Opera7
      mousex = e.clientX + document.body.scrollLeft;
      mousey = e.clientY + document.body.scrollTop;
      algor = '[e.clientX]';
      if (e.pageX || e.pageY) algor += ' [e.pageX] '
    }
    
  }
}

function update(e)
{
  getMouseXY(e); // NS is passing (event), while IE is passing (null)

  document.getElementById('span_browser').innerHTML = navigator.appName;
  document.getElementById('span_winevent').innerHTML = window.event ? window.event.type : '(na)';
  document.getElementById('span_autevent').innerHTML = e ? e.type : '(na)';
  document.getElementById('span_mousex').innerHTML = mousex;
  document.getElementById('span_mousey').innerHTML = mousey;
  document.getElementById('span_grabx').innerHTML = grabx;
  document.getElementById('span_graby').innerHTML = graby;
  document.getElementById('span_elex').innerHTML = elex;
  document.getElementById('span_algor').innerHTML = algor;
}

function grab()//按
{
  grabx = mousex;//點下的x坐標
  graby = mousey;//點下的y坐標

  for(i=0;i<document.getElementsByTagName("div").length;i++){//按下時的 所有的 DIV 的 left
	objdivleft[i]=document.getElementsByTagName("div")[i].style.left;
	objdivleft[i]=objdivleft[i].substring(0,objdivleft[i].indexOf("px"));
  }
  
  document.onmousemove = drag;//按住移動
  //elex = orix = parseInt(dragobj.style.left,10);
  update();
}

function drag(e) // parameter passing is important for NS family █按住移動
{
  	for(i=0;i<document.getElementsByTagName("div").length;i++){
  		elex[i] = parseInt(objdivleft[i]) + parseInt(mousex-grabx);
  		document.getElementsByTagName("div")[i].style.left=elex[i] + 'px';
  	}
	update(e);
}

function drop()//放開
{ 
  document.onmousemove = update;
}

</script>
</body>

</html>
Chair's blog

2009年5月19日星期二

plurk 時間軸

沒有留言:

張貼留言

2009年5月19日 星期二

plurk 時間軸

沒有留言:

張貼留言

2009年5月19日星期二
