飞比寻常 (JOE) 生，简单，活，简单，生活，不简单！
JOE个人网站
JOE个人网站，不仅仅是一个网站，更像是一个展现自我的平台，致力于让朋友们都可以
有所感触，有所收获。
--------------------------------------------------
1、鼠标事件
--------------onmousemove 中如何获取鼠标的坐标------------
<script>
//documentElement 代表整个文档区域，而不仅限于body部分
document.documentElement.onmousemove=function(event){
var x=event.clientX;//获取x轴坐标
var y=event.clientY;//获取y轴坐标
var ox=document.getElementById('x');
var oy=document.getElementById('y');
ox.innerHTML=x;
oy.innerHTML=y;
}
</script>
</head>
<!-- 键盘事件可以写在body中 -->
<body>
x:<b id="x"></b>
y:<b id='y'></b>
</body>
---------------------------------------------------------
<script>
window.onload=function() {
var oimg=document.getElementById('imgid');
//documentElement 代表整个文档区域，而不仅限于body部分
document.documentElement.onmousemove=function(event) {
var x=event.clientX;//获取x轴坐标
var y=event.clientY;//获取y轴坐标
oimg.style.left=x+'px';
oimg.style.top=y+'px';
}
}
</script>
</head>
<!-- 键盘事件可以写在body中 -->
<body>
<img src="./a.jpg" id='imgid' style="position:absolute;top:0;left:0"/>
</body>
----------------------------------------------------------
<script>
window.onload=function() {
//获取图片对象
var oimg=document.getElementById('imgid');
//准备2个空数组，一个放x轴坐标，一个放y轴坐标
var x_arr=new Array();
var y_arr=new Array();
document.documentElement.onmousemove=function(event) {
//将坐标轴压入数组
x_arr.push(event.clientX);
y_arr.push(event.clientY);
//2秒后释放数组，改变对象的left和top值
var s=setInterval(function() {
var x=x_arr.shift();
var y=y_arr.shift();
oimg.style.left=x+'px';
oimg.style.top=y+'px';
clearInterval(s);
},2000);
}
}
</script>
</head>
<body>
<img src="./a.jpg" id='imgid' style="position:absolute;top:0;left:0" width="50" height='28'/>
</body>
----------------------点住移动图片的实现方法1/3-----------------------
<script>
window.onload=function() {
var press='no'; //代表鼠标没有按下
//1.获取图片对象
var odiv=document.getElementById('did');
//2.图片移动触发程序
odiv.onmousedown=function(event) {
press='yes';//代表鼠标按下
w=parseInt(odiv.style.left); //获取当前图片x偏移
h=parseInt(odiv.style.top); //获取当前图片y偏移
event = window.event || event;//解决event的兼容性问题
x1=event.clientX-w; //获取点击时的x位置-w
y1=event.clientY-h; //获取点击时的y位置-h
//3.获取鼠标在整个区域中的坐标点
document.documentElement.onmousemove=function(event) {
event = window.event || event;//解决event的兼容性问题
var x=event.clientX-x1; //获取移动时鼠标的x轴-x1，即图片应该在的x
var y=event.clientY-y1; //获取移动时鼠标的y轴-y1，即图片应该在的y
if(press=='yes') {
odiv.style.left=x+'px';
odiv.style.top=y+'px';
}
}
}
odiv.onmouseup=function() {
press='no';//不按了
}
}
</script>
</head>
<body>
<div id='did' style="background:url(./b.jpg);position:absolute;top:0;left:0;width:428px;height:506px"></div>
</body>
----------------------点住移动图片的实现方法2/3-----------------------
<script>
window.onload=function() {
var press='no'; //代表鼠标没有按下
//1.获取图片对象
var odiv=document.getElementById('did');
//2.图片移动触发程序
odiv.onmousedown=function(event) {
press='yes';//代表鼠标按下
var clickx=event.clientX; //获取点击时的X坐标
var clicky=event.clientY;//Y坐标
pointx=parseInt(odiv.style.left); //照片坐标X
pointy=parseInt(odiv.style.top); //Y
//3.获取鼠标在整个区域中的坐标点
document.documentElement.onmousemove=function(event) {
var x=event.clientX; //获取鼠标的x轴
var y=event.clientY; //获取鼠标的y轴
var mvx=x-clickx; //移动的坐标X
var mvy=y-clicky; //移动的坐标X
if(press=='yes') {
odiv.style.left=(pointx+mvx)+'px'; //现坐标=照片坐标+移动距离
odiv.style.top=(pointy+mvy)+'px';
}
}
}
odiv.onmouseup=function() {
press='no';//不按了
}
}
</script>
</head>
<body>
<div id='did' style="background:url(./b.jpg);position:absolute;top:0;left:0;width:428px;height:506px"></div>
</body>
----------------------点住移动图片的实现方法3/3-----------------------
<script type="text/javascript" charset="utf-8">
window.onload=function() {
// press='no';
odiv=document.getElementById('did');
odiv.onmousedown=function(event) {
press='yes';
x=parseInt(odiv.style.left);
y=parseInt(odiv.style.top);
event = window.event || event;
ox=event.clientX;
oy=event.clientY;
document.documentElement.onmousemove=function(event) {
event = window.event || event;
var mx=event.clientX;
var my=event.clientY;
var xx=mx-ox+x;
var yy=my-oy+y;
if(press=='yes') {
odiv.style.top=yy+'px';
odiv.style.left=xx+'px';
}
}
}
odiv.onmouseup=function() {
press='no';
}
}
</script>
</head>
<body>
<div id="did" style="background:url(./b.jpg);position:absolute;top:0px;left:0px;width:428px;height:506px;"></div>
</body>
--------------------------------------------------------------