当前位置：网站综合首页 >> 网页JS特效 >> 鼠标事件类 >> 网页效果获取鼠标点击的位置

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

来源：中国设计秀作者：佚名点击：1258 加入收藏发表评论

顶一下

关键字：网页效果鼠标网页效果 js

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

HTML代码

代码如下,点击运行可查看效果:

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

HTML代码

代码如下,点击运行可查看效果:

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

HTML代码

代码如下,点击运行可查看效果:

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

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[1] [2]

2008-06-27 00:47:00 出处：中国设计秀cnwebshow.com

本文引用地址：http://www.cnwebshow.com/site/html/article_2348.html

热点文章/相关文章

素材下载　矢量潮流素材背景素材模板