注册 | 登陆

您的位置：阿里西西 > 网页特效 > 鼠标特效 > 详细内容

4顶

js获取当前鼠标动态坐标

稿源：互联网 2022-06-17 18:33:01 点击： 6892 撤稿纠错

在指定区域内取得鼠标坐标效果，可自定义。

以下讨论的是和相关的js获取当前鼠标动态坐标教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<style type="text/css">

</style>
<a href="http://www.zzjs.net/">站长特效</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>


<button onclick="alert(getPoint())">得到坐标</button>
<div style="width:505px;height:580px; margin-left:auto; margin-right:auto; position:absolute; z-index:1; margin-left:40px; border:#666 1px dashed" id="basePanl" onmousedown="sDraw()" onmousemove="iDraw()" onmouseup="eDraw();" >
 
    <div style="width:100%; height:100%; position:absolute; z-index:10;" id="map">
     
    <div style="background:#CCC; border:1px solid #666; position:absolute; z-index:20; width:150px; height:100px; left:0px; top: 0px; text-align:left; color:#09F; font-weight:bold; font-size:12px;" class="alpha" id="infoPanl"></div>
    
 <div style="width:100%;height:100%; position:absolute; z-index:30; background:#ff0" id="opDiv" class="alpha2">
    </div>
 
    <div style="background:#CCC; border:1px solid #666; position:absolute; z-index:50; width:0px; height:0px; left:0px; top: 0px; color:#F60;" class="alpha" id="theDiv"></div>
</div>
<script language="javascript">
var theFlag = 0;//操作是否开始(1是；0否)
var xs = 0;//鼠标按下时的初始x座标
var ys = 0;//鼠标按下时的初始y座标
var xe = 0;//鼠标松开时的初始x座标
var ye = 0;//鼠标松开时的初始y座标
var xc = 0;//当前鼠标x座标
var yc = 0;//当前鼠标y座标
var theDiv = document.getElementById("theDiv");//拖曳时生成对象
var basePanl = document.getElementById("basePanl"); //地图容器基本层
var infoPanl = document.getElementById("infoPanl"); //信息显示层
//拖曳开始
function sDraw()
{
 theFlag = 1;
 xs = getMouse()[0];
 ys = getMouse()[1];
 getMouse();
 showOffset();
//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
}
//拖曳中
function iDraw()
{
 xc = getMouse()[0]; //当前位置
 yc = getMouse()[1];
 showOffset();
 if(theFlag == 1) //是否拖曳中
 {
 xe = getMouse()[0];
 ye = getMouse()[1];
 drawDiv();
 }
}
//拖曳结束
function eDraw()
{
 theFlag = 0;
 setCursor("");//复原鼠标样式
}
//获得鼠标的坐标
function getMouse()
{//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 x = parseInt(document.body.scrollLeft) + parseInt(event.clientX) - getoffset(basePanl)[0] ;//鼠标x座标值
    y = parseInt(document.body.scrollTop) + parseInt(event.clientY) - getoffset(basePanl)[1] ;//鼠标y座标值
 var rec = new Array(1);
 rec[0]  = x;
 rec[1] = y;
 return rec
}
//获得指定元素的坐标
function getoffset(e)
{
 var t=e.offsetTop;
 var l=e.offsetLeft;
 while(e=e.offsetParent)
 {
  t+=e.offsetTop;
  l+=e.offsetLeft;
 }
 var rec = new Array(1);
 rec[0]  = l;  //X坐标
 rec[1] = t;  //Y坐标
 return rec
}
//显示坐标信息
function showOffset()
{
 infoPanl.innerHTML = "First:["+getPoint()[0]+":"+getPoint()[1]+"]<br>Secord:["+getPoint()[2]+":"+getPoint()[3]+"]<br>current:["+getPoint()[4]+":"+getPoint()[5]+"]";
}
//生成选择区域DIV
function drawDiv()
{
  if(xe > xs)
  {
   theDiv.style.left = xs;
   theDiv.style.width = xe-xs;
   //判断方向以设置坐标
   if(ye > ys)
   {setCursor("se-resize");}
   else
   {setCursor("ne-resize");}
  }
  else
  {
   theDiv.style.left = xe;
   theDiv.style.width = xs-xe;
   //判断方向以设置坐标
   if(ye > ys)
   {setCursor("ne-resize");}
   else
   {setCursor("se-resize");}
  }
  if(ye > ys)
  {
   theDiv.style.top = ys;
   theDiv.style.height = ye-ys;
   }
  else
  {
   theDiv.style.top = ye;
   theDiv.style.height = ys-ye;
  }
}
//设置鼠标样式
function setCursor(type)
{
   document.getElementById("opDiv").style.cursor = type;
   document.getElementById("theDiv").style.cursor = type;
}
//得到坐标
function getPoint()
{
 var ret = new Array(6);
 ret[0]  =(theDiv.style.left).replace("px","");
 ret[1] = (theDiv.style.top).replace("px","");
 ret[2] = xe;
 ret[3] = ye;
 ret[4] = xc;
 ret[5] = yc;
 ret[6] = theFlag;
 return ret;
}
</script>

关于js获取当前鼠标动态坐标的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016296362335.shtml方便下次再访问哦。

·上一篇： 漂亮实用的评分效果
·下一篇： 跟随鼠标晃动的弹性图片

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

更多 »

最新新闻

更多 »