js 鼠标坐标 

<!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>

 

posted @ 2017-04-23 11:35  西瓜霜  阅读(141)  评论(0)  编辑  收藏  举报