注册 | 登陆

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

0顶

鼠标选择区特效

稿源：互联网 2022-06-16 10:27:00 点击： 5363 撤稿纠错

鼠标选择区特效，有点击坐标，宽度和高度，并显示鼠标当前坐标。

以下讨论的是和特效相关的鼠标选择区特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

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

<style type="text/css">

</style>
告诉你一个应有尽有的网页特效网址：<a href="http://js.alixixi.com">http://js.alixixi.com</a>
<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();

}
//拖曳中
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() 
{
 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>

关于鼠标选择区特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2009101958640.shtml方便下次再访问哦。

·上一篇： 可拉伸移动的DIV层效果
·下一篇： 可拖动拉伸的左右分栏

相关阅读

文章分类LIST >>返回首页

排行总榜

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

最新游戏

更多 »

最新新闻

更多 »