<HTML>
<HEAD>
<TITLE>DHTML Demo</TITLE>
<script language="javascript">
<!--
ff5 = navigator.appName == 'Netscape' ? true : false; //mozilla firefox
ns4 = document.layers ? true : false; //Netscape
ie4 = document.all ? true : false; //Microsoft Internet Explorer
var dragClickX, dragClickY; //用于保存单击鼠标时的坐标
var dragActive = false; //移动标志
var dragObj; //移动对象
var tpl = ''; //信息列表模板
/**
* 初始化
**/
function init() {
if(ns4) {
dragObj = document.squareDiv;
dragObj.xpos = dragObj.left;
dragObj.ypos = dragObj.top;
dragObj.w = dragObj.clip.width;
dragObj.h = dragObj.clip.height;
}
if(ie4) {
dragObj = document.getElementById('squareDiv');
dragObj.xpos = dragObj.offsetLeft;
dragObj.ypos = dragObj.offsetTop;
dragObj.w = dragObj.offsetWidth;
dragObj.h = dragObj.offsetHeight;
}
if(ff5) {
dragObj = document.getElementById('squareDiv');
dragObj.xpos = dragObj.offsetTop;
dragObj.ypos = dragObj.offsetLeft;
dragObj.w = dragObj.offsetWidth;
dragObj.h = dragObj.offsetHeight;
}
dragActive = false;
document.onmousedown = mouseDown;
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
document.onkeydown = info;
document.onkeyup = info;
document.onkeypress = info;
if(ns4)
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
tpl = document.getElementById('view').innerHTML;
}
/**
* 鼠标键按下事件
**/
function mouseDown(e) {
info(e);
if((ns4 && e.which==1) || ie4 || ff5) {
if(ns4 || ff5) {
var x = e.pageX;
var y = e.pageY;
}
if(ie4) {
var x = event.x + document.body.scrollLeft;
var y = event.y + document.body.scrollTop;
}
if(x>=dragObj.xpos && x<=dragObj.xpos+dragObj.w && y>=dragObj.ypos && y<=dragObj.ypos+dragObj.h) {
dragClickX = x - dragObj.xpos;
dragClickY = y - dragObj.ypos;
dragActive = true;
return false;
}
}
}
/**
* 鼠标键抬起事件
**/
function mouseUp(e) {
dragActive = false;
}
/**
* 鼠标移动事件
**/
function mouseMove(e) {
info(e);
if(ns4 || ff5) {
var x = e.pageX;
var y = e.pageY;
}
if(ie4) {
var x = event.x + document.body.scrollLeft;
var y = event.y + document.body.scrollTop;
}
if(dragActive) {
dragObj.xpos = x - dragClickX;
dragObj.ypos = y - dragClickY;
if(ff5) {
dragObj.setAttribute('style','left:'+dragObj.xpos+';top:'+dragObj.ypos);
}
if(ns4) {
dragObj.left = dragObj.xpos;
dragObj.top = dragObj.ypos;
}
if(ie4) {
dragObj.style.pixelLeft = dragObj.xpos;
dragObj.style.pixelTop = dragObj.ypos;
}
return false;
}
}
/**
* 显示节点事件信息
**/
function info(e) {
if(ie4) e = event;
var s = tpl;
s = s.replace('{appName}', navigator.appName);
s = s.replace('{type}', e.type);
if(ff5) {
s = s.replace('{nodeName}', e.explicitOriginalTarget.nodeName);
s = s.replace('{ID}', e.explicitOriginalTarget.id);
s = s.replace('{name}', e.explicitOriginalTarget.name);
s = s.replace('{layerX}', e.layerX);
s = s.replace('{layerY}', e.layerY);
s = s.replace('{pageX}', e.pageX);
s = s.replace('{pageY}', e.pageY);
s = s.replace('{offsetLeft}',+ e.explicitOriginalTarget.offsetLeft);
s = s.replace('{offsetTop}', e.explicitOriginalTarget.offsetTop);
}
if(ie4) {
s = s.replace('{nodeName}', e.srcElement.nodeName);
s = s.replace('{ID}', e.srcElement.id);
s = s.replace('{name}', e.srcElement.name);
s = s.replace('{offsetX}', e.offsetX);
s = s.replace('{offsetY}', e.offsetY);
s = s.replace('{x}', e.x);
s = s.replace('{y}', e.y);
}
s = s.replace(/\{screenX\}/g, e.screenX);
s = s.replace(/\{screenY\}/g, e.screenY);
s = s.replace(/\{clientX\}/g, e.clientX);
s = s.replace(/\{clientY\}/g, e.clientY);
s = s.replace('{xpos}', dragObj.xpos);
s = s.replace('{ypos}', dragObj.ypos);
s = s.replace('{w}', dragObj.w);
s = s.replace('{h}', dragObj.h);
s = s.replace('{ClickX}', dragClickX);
s = s.replace('{ClickY}', dragClickY);
s = s.replace('{Active}', dragActive);
s = s.replace('{keyCode}', e.keyCode);
s = s.replace('{button}', e.button);
s = s.replace('{which}', e.which);
s = s.replace('{shiftKey}', e.shiftKey);
s = s.replace('{ctrlKey}', e.ctrlKey);
s = s.replace('{altKey}', e.altKey);
s = s.replace('{shiftLeft}', e.shiftLeft);
s = s.replace('{ctrlLeft}', e.ctrlLeft);
s = s.replace('{metaKey}', e.metaKey);
s = s.replace(/\{\w+\}/g, ' ');
document.getElementById('view').innerHTML = s;
document.getElementById('view').style.display = '';
}
//-->
</script>
<style type="text/css">
<!--
#squareDiv{position:absolute;left:100;top:100;width:50;height:50;clip:rect(0,50,50,0);
background-color:blue;layer-background-color:blue;}
-->
</style>
</HEAD>
<BODY onLoad="init()">
<div id="squareDiv"></div>
<div id="view" style="display:none"><table border width=400>
<tr><td>浏览器</td><td colspan=5>{appName}</td></tr>
<tr><td>事件</td><td colspan=5>{type}</td></tr>
<tr><td>节点</td><td colspan=5>{nodeName}</td></tr>
<tr><td>节点ID</td><td colspan=5>{ID}</td></tr>
<tr><td>节点name</td><td colspan=5>{name}</td></tr>
<tr><th colspan=2 width=33%>IE</th><th colspan=2 width=33%>Firefox</th><th colspan=2>Netscape</th></tr>
<tr><td>offsetX</td><td>{offsetX}</td><td>layerX</td><td>{layerX}</td><td></td><td></td></tr>
<tr><td>offsetY</td><td>{offsetY}</td><td>layerY</td><td>{layerY}</td><td></td><td></td></tr>
<tr><td>x</td><td>{x}</td><td>pagrX</td><td>{pageX}</td><td></td><td></td></tr>
<tr><td>y</td><td>{y}</td><td>pageY</td><td>{pageY}</td><td></td><td></td></tr>
<tr><td>screenX</td><td>{screenX}</td><td>screenX</td><td>{screenX}</td><td></td><td></td></tr>
<tr><td>screenY</td><td>{screenY}</td><td>screenY</td><td>{screenY}</td><td></td><td></td></tr>
<tr><td>clientX</td><td>{clientX}</td><td>clientX</td><td>{clientX}</td><td></td><td></td></tr>
<tr><td>clientY</td><td>{clientY}</td><td>clientY</td><td>{clientY}</td><td></td><td></td></tr>
<tr><td colspan=6>按键</td></tr>
<tr><td>keyCode</td><td>{keyCode}</td><td>button</td><td>{button}</td><td>which</td><td>{which}</td></tr>
<tr><td>shiftKey</td><td>{shiftKey}</td><td>ctrlKey</td><td>{ctrlKey}</td><td>altKey</td><td>{altKey}</td></tr>
<tr><td>shiftLeft</td><td>{shiftLeft}</td><td>ctrlLeft</td><td>{ctrlLeft}</td><td>metaKey</td><td>{metaKey}</td></tr>
<tr><td colspan=6>工作变量</td></tr>
<tr><td>dragObj.xpos</td><td colspan=5>{xpos}</td></tr>
<tr><td>dragObj.ypos</td><td colspan=5>{ypos}</td></tr>
<tr><td>dragObj.w</td><td colspan=5>{w}</td></tr>
<tr><td>dragObj.h</td><td colspan=5>{h}</td></tr>
<tr><td>dragClickX</td><td colspan=5>{ClickX}</td></tr>
<tr><td>dragClickY</td><td colspan=5>{ClickY}</td></tr>
<tr><td>dragActive</td><td colspan=5>{Active}</td></tr>
</table>
</div>
posted on 2006-04-03 14:21
汪杰 阅读(248)
评论(0) 编辑 收藏 引用 所属分类:
hengxing网站js