您的位置：首页 > 其它

网页效果获取鼠标点击的位置

2011-08-05 10:51 399 查看

1.首先来看一个简单的获取鼠标位置：

<a href="javascript:void(0);" onclick="x(this)" alt='aa' >aaa</a>

<br>

<input type="text" onclick="x(this)" value="cccc1">

<br>

<input type="text" onclick="x(this)" value="cccc2">

<br>

<input type="text" onclick="x(this)" value="cccc3">

<br>

<input type="text" onclick="x(this)" value="cccc4">

<div id="div1"></div>

<script>

function x(o)

{

document.all.div1.style.visibility="visible";

document.all.div1.innerText=o.value;

document.all.div1.style.top=event.clientY;

document.all.div1.style.left=event.clientX;

alert(event.clientX+ " "+event.clientY);

var a = window.event.x;

var b = window.event.y;

alert(a+" "+ b);

}

</script>

2，获取鼠标位置后，我们就可以控制window.open的位置。

<script>

function ccc()

{

k=window.showModalDialog("a.html",null,"dialogwidth:145px;dialogheight:155px;dialogtop:"+ event.screenY+";dialogleft:" + event.screenX);

}

</script>

<input type="text" value="" onclick="ccc()" >

3，做了一个弹出层，点击层外面也可以关闭层。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Popup-Window</TITLE>

<style>

#alert {font-size:12px;border:1px solid #369;width:200px;height:50px;background:#e2ecf5;z-index:1000;position:absolute;}

</style>

<script>

function hid()

{

var myAlert = document.getElementById("alert");

myAlert.style.display = "none";

}

function onsub(name)

{

// mClose.onclick();

hid();

document.getElementById("new_one").value=name.innerText;

}

function new_hid()

{

hid();

}

</script>

</HEAD>

<BODY>

<Br><Br><Br>

<span id="content"><input type="text" value="" class="tx4" id="new_one"></span>

<div id="alert" style="display:none;">

<p><a href="javascript:void(0);" onclick="onsub(this);">test1</a></p>

<p><a href="javascript:void(0);" onclick="onsub(this);">test2</a></p>

<p><a href="javascript:void(0);" onclick="onsub(this);">test3</a></p>

<p><a href="javascript:void(0);" onclick="onsub(this);">test4</a></p>

<p><center><span id="close" style="cursor:hand;">close</span></center></p>

</div>

<div style="width:100%;height:100%;" onclick="new_hid();"></div>

<script type="text/javascript">

var myAlert = document.getElementById("alert");

var reg = document.getElementById("new_one");

var mClose = document.getElementById("close");

reg.onclick = function()

{

myAlert.style.display = "block";

//myAlert.style.position = "absolute";

//myAlert.style.width="200px";

//myAlert.style.height="200px";

// var a = window.event.x;

// var b = window.event.y;

// alert(a+ " "+b);

myAlert.style.top=event.clientY;

myAlert.style.left=event.clientX;

}

mClose.onclick = function()

{

myAlert.style.display = "none";

}

</script>

</BODY>

</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航