鼠标选择区特效,有点击坐标,宽度和高度,并显示鼠标当前坐标。
<style type="text/css">
<!--
.alpha {
filter:alpha(opacity=50);
-moz-opacity:0.5;
}
.alpha2 {
filter:alpha(opacity=0);
-moz-opacity:0;
}
-->
</style>
告诉你一个应有尽有的网页特效网址:<a href="http://www.codesocang.com">http://www.codesocang.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">
<!--img src="http://tczx.tancheng.gov.cn:8080/doc/map/0-China-stnader.gif" width="100%" height="100%" border="0" /-背景图还是隐藏了吧->
</div>
<!--信息提示区域-->
<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>
鼠标选择区特效由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/shubiaotexiao/4650.html