<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS获得鼠标位置（兼容多浏览器ie,firefox）脚本之家修正版</title>
</head>
<body>
<script>
function mouseMove(ev)
{
ev= ev || window.event;
var mousePos = mouseCoords(ev);
//alert(ev.pageX);
document.getElementById("xxx").value = mousePos.x;
document.getElementById("yyy").value = mousePos.y;
}
function mouseCoords(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
document.onmousemove = mouseMove;
</script>
鼠标 X 轴:
<input id=xxx type=text>
鼠标 Y 轴:
<input id=yyy type=text>
</body>
拖拽小案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标示例,磁性吸附效果</title>
<style>
#div1 { width:100px; height:100px; position:absolute; background-color:#7391C5; }
#img1 { position:absolute}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oImg = document.getElementById('img1');
tqfc(oDiv);
tqfc(oImg);
function tqfc(obj){
obj.onmousedown = function(ev){
var ev = ev || event;
var oDivX = ev.clientX - this.offsetLeft;
var oDivY = ev.clientY - this.offsetTop;
obj.style.backgroundColor = 'red';
//加入兼容问题
if(obj.setCapture){
obj.setCapture();
}
document.onmousemove = function(ev){ //注意这里是document
var ev = ev || event;
L = ev.clientX - oDivX;
T = ev.clientY - oDivY;
//限制不超出可视范围
if(L<100){ //磁性吸附重点在于这里,原本是0,改成100
L = 0;
}else if(L>document.documentElement.clientWidth - obj.offsetWidth){
L = document.documentElement.clientWidth - obj.offsetWidth;
}
if(T<0){
T = 0;
}else if(T>document.documentElement.clientHeight - obj.offsetHeight){
T = document.documentElement.clientHeight - obj.offsetHeight;
}
obj.style.left = L + 'px';
obj.style.top = T + 'px';
}
return false;
}
obj.onmouseup = function(){
document.onmousedown = document.onmousemove = null;
obj.style.backgroundColor = '#7391C5';
//加入兼容问题
if( obj.releaseCapture ){
obj.releaseCapture();
}
}
}
}
</script>
</head>
<body>
<div id="div1"></div>
<img src="标签图片/1.JPG" width="100" id="img1"/>
</body>
</html>
破罐子互摔
